React-Resizable

React-Resizable is a small, focused React component that makes any element resizable via one or more drag handles. It ships two building blocks: the low-level Resizable wrapper that adds resize behavior to arbitrary children, and the higher-level ResizableBox element that combines Resizable with a styled div for the common case of just wanting a box you can drag to resize.

Maintained under the react-grid-layout organization (the same team behind the popular drag-and-drop grid library), React-Resizable is written in TypeScript, ships its own handle CSS, and is deliberately unopinionated about layout — it only handles the resize interaction itself, leaving positioning and grid behavior to the consuming application or to companion libraries like react-grid-layout.

What You Get

• A <Resizable> component that adds resize handles and drag tracking to any child element
• A <ResizableBox> convenience component pairing Resizable with a styled container div
• Configurable handle positions (corners and edges) via the handle/resizeHandles props
• Min/max size constraints and aspect-ratio locking during resize
• Onresize/onresizestart/onresizestop callback props for wiring resize state into parent components
• Included CSS for handle styling that must be imported alongside the component

Common Use Cases

• Adding resizable panels or widgets to dashboard and admin UIs
• Building resizable chart/panel containers in combination with a grid layout system like react-grid-layout
• Letting users resize image, video, or iframe embeds within a content editor
• Implementing resizable split-pane or sidebar layouts in React applications

Under The Hood

Architecture The component lives almost entirely in lib/Resizable.tsx (231 lines), which tracks pointer/touch drag state internally and computes new width/height on each move event, clamping to the minConstraints/maxConstraints props and optionally preserving aspect ratio; lib/ResizableBox.tsx (104 lines) is a thin wrapper that renders Resizable around a plain div, applying the current size as inline style so consumers get a ready-to-use resizable box without managing state themselves. lib/utils.ts holds small shared helper functions (clamping, snapping), and lib/propTypes.ts centralizes the exported TypeScript prop types used by both components. Tech Stack Written in TypeScript, compiled via a build.sh script into a build/ directory with .d.ts type declarations, with react as a peer dependency and no other runtime dependencies beyond DOM event handling — it deliberately avoids pulling in a full drag-and-drop library, implementing pointer tracking directly. Code Quality The __tests__/ directory covers both components directly (Resizable.test.tsx, ResizableBox.test.tsx) plus an integration/end-to-end.test.tsx and a dedicated ssr.test.ts verifying the component renders safely under server-side rendering; tests run via Jest with coverage enabled (jest --coverage) and snapshot tests guard rendered markup, and the project enforces eslint + tsc --noEmit typechecking before every version bump via a preversion script. API Design The prop surface is small and consistent between Resizable and ResizableBox (width/height, onResize/onResizeStart/onResizeStop, minConstraints/maxConstraints, resizeHandles), and the README documents both components with runnable examples, keeping the learning curve low for a single, well-scoped interaction pattern.