react-rnd

react-rnd wraps react-draggable and re-resizable behind a single <Rnd> component, giving developers combined drag-and-resize behavior without wiring the two libraries together by hand. It supports both controlled (size/position) and uncontrolled (default) usage, per-side resize handle enabling/disabling, aspect-ratio locking, drag-axis constraints, and multiple bounding strategies (a parent element, the window, the document body, a CSS selector, or an arbitrary Element).

It’s commonly used for floating panels, resizable modals and widgets, canvas/whiteboard nodes, split layouts, and window-manager-style UIs. The component ships with an extensive test suite and full TypeScript typings for every prop and callback. Development activity has slowed relative to its early years, but the library remains widely downloaded and its own dependency surface is small — just react-draggable and re-resizable.

What You Get

• A single <Rnd> component combining drag and resize behavior instead of composing two separate libraries yourself
• Controlled and uncontrolled modes via size/position props or a default initial layout
• Bounds constraints against a parent element, the window, the document body, a CSS selector, or a specific Element
• Per-handle resize enabling, custom resize handle components/styles/classes, and aspect-ratio locking
• Full TypeScript typings for every prop and callback

Common Use Cases

• Floating panel UIs in dashboard/canvas builders where users drag and resize widget panels
• Resizable modal or dialog windows instead of fixed pixel dimensions
• Whiteboard and node-based diagramming tools where each node is independently draggable and resizable
• Window-manager-style browser layouts where panes behave like OS windows

Under The Hood

Architecture react-rnd is a single-file, class-based Rnd extends React.PureComponent<Props, State> that acts as a thin orchestration layer over two lower-level libraries: react-draggable’s Draggable and re-resizable’s Resizable, nested as parent/child. It holds imperative references to both child instances (this.draggable, this.resizable) and manually reconciles their independent internal state — for example reading react-draggable’s internal x/y via getDraggablePosition() and force-updating after mount to correct initial offsets. Bounds handling (parent/window/body/selector/Element) is computed imperatively in onDragStart/onResizeStart via getBoundingClientRect() math rather than delegated to either child library. Because everything lives in one ~690-line class with no internal module boundaries, a change to the bounds math, drag-axis logic, or an upgrade of either child dependency touches the same file and carries a correspondingly wide blast radius.

Tech Stack The package is authored in TypeScript (strict mode, ES5 target) and depends on react-draggable (^4.5.0), re-resizable (^6.11.2), and tslib, with React itself as a peer dependency (>=16.3.0). It builds dual bundles (an ES5 CommonJS entry and an ESM entry) via Rollup (scripts/prod.js / prod.es5.js) with Babel handling the React/TypeScript transforms. Storybook 6.5 provides interactive component demos deployed to GitHub Pages, dependency updates are automated via Renovate, and the project is managed with a pinned pnpm version. GitHub Actions CI runs linting and tsc type-checking on every push.

Code Quality The component has an extensive dedicated test file (src/index.test.tsx, ~795 lines, using Enzyme and react-test-renderer) covering drag, resize, and bounds behavior in detail — but the CI test job is currently commented out in ci.yml, so only lint and type-check run automatically rather than the test suite itself. Linting uses TSLint (an unmaintained tool upstream) rather than ESLint. Inline comments are sparse (a handful of HACK:-prefixed notes, no JSDoc), though prop and callback types are thoroughly declared and exported, and strict mode is enabled in tsconfig.json.

What Makes It Unique react-rnd’s value isn’t a novel drag or resize algorithm — both are delegated to established libraries — but the ergonomics of unifying them behind one component with a single coherent prop API, including bounds strategies (window/body/parent/selector/Element) and per-handle resize toggling that neither underlying library provides on its own. This composition-over-reimplementation approach is a standard pattern for React utility components rather than a technical innovation.