react-flexi-window – Draggable & Resizable Windows for React

July 4, 2025

This content originally appeared on DEV Community and was authored by Raktim

Hi DEV Community! I’m thrilled to share my first npm package, react-flexi-window, a lightweight React component for creating draggable and resizable windows in your apps. As a new open-source contributor, this is a big milestone for me, and I’d love your feedback!

What is react-flexi-window?

react-flexi-window lets you build dynamic, interactive UI windows that users can drag and resize. It’s designed to be flexible, performant, and easy to integrate, with zero dependencies (except React) and full TypeScript support.

Key Features

Draggable & Resizable: Move windows by dragging and resize them via edges or corners.
Assistive Resize Handles: Large, visible corner handles appear during interaction for better usability (great for touch devices).
Viewport Constraints: Optionally keep windows within the browser viewport.
Customizable Styling: Built-in color system (e.g., blue-500/30), border radius, shadows, and backdrop blur.
Responsive: Automatically adjusts to viewport changes.
Lightweight: Only 90.5 kB with no extra dependencies.
Performance Optimized: Efficient event handling and minimal DOM updates.
Smart Interactions: Ignores clicks on buttons, inputs, and other interactive elements.

Get Started

Install it:

npm install react-flexi-window

Basic example:

import WindowComponent from 'react-flexi-window';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
      <WindowComponent
        w={400}
        h={300}
        x={100}
        y={100}
        windowColor="blue-500/20"
        windowBorderRadius="lg"
        boundary={true}
      >
        <div style={{ padding: '20px' }}>
          <h2>My Window</h2>
          <p>Drag and resize me!</p>
        </div>
      </WindowComponent>
    </div>
  );
}

Check out the full docs and demo:

Why I Built It

I wanted a simple, flexible way to create draggable windows in React without heavy dependencies. Inspired by libraries like react-window (but for UI windows, not virtualization), I aimed for a component that’s easy to style and use, with features like TypeScript support and touch-friendly handles.

What’s Next?

I’m working on improving the demo site and adding more examples. If you try react-flexi-window, I’d love to hear your thoughts! Suggestions, bug reports, or contributions are welcome on GitHub.Thanks for checking it out!

This content originally appeared on DEV Community and was authored by Raktim