re-resizable

re-resizable is a React component library that wraps any child content in a resizable box, exposing eight drag handles (four edges, four corners) for freeform or constrained resizing. It ships as a single dependency-free package — no runtime dependencies beyond React itself — and supports both controlled (size) and uncontrolled (defaultSize) usage, matching how the rest of a typical React app already manages state.

Beyond basic drag-resize, it handles the edge cases teams tend to hand-roll themselves: aspect-ratio locking (with extra width/height for adjacent sidebars or headers), grid and snap-point resizing, resize boundaries scoped to the window, the parent, or an arbitrary element, and correct behavior inside CSS-scaled ancestors via a scale prop. An imperative updateSize instance method lets consumers resize programmatically outside the normal props flow.

What You Get

• Eight-direction resize handles (edges + corners) with per-direction enable/disable control
• Controlled and uncontrolled size APIs (size vs defaultSize) with resize start/move/stop callbacks
• Grid, snap-point, and aspect-ratio-lock resize constraints, including bounds scoped to window, parent, or element
• Zero runtime dependencies and a small footprint, shipped as both ES5 and ESM builds
• Full TypeScript types and an imperative updateSize API for programmatic resizing

Common Use Cases

• Resizable side panels and dashboard widgets
• User-resizable image/video/media containers that preserve aspect ratio
• Split-pane / IDE-style layouts with draggable dividers
• Resizable text areas, chat boxes, or embeds with min/max size constraints

Under The Hood

Architecture The library centers on a single Resizable class component (src/index.tsx, extending PureComponent) that owns all resize state — original pointer position, original size, active direction, and an isResizing flag — and delegates the eight visual drag handles to a small memoized Resizer function component (src/resizer.tsx) that just wires onMouseDown/onTouchStart per direction. Rather than relying on React’s synthetic events for drag tracking, Resizable attaches mousemove/mouseup/touchmove/touchend listeners directly to window in componentDidMount, and mutates the wrapper’s DOM style imperatively via a ref during drag (wrapping updates in flushSync from react-dom to force synchronous, tear-free commits mid-drag). This keeps resize math — grid/snap clamping, aspect-ratio locking, boundary calculation — concentrated in a handful of instance methods (calculateNewMax, calculateNewMaxFromBoundary), which is easy to reason about but means the freeform, grid-snapped, aspect-locked, and bounded resize modes all share the same code path, so a change to the core clamping logic risks affecting all of them at once.

Tech Stack Written in strict TypeScript with React as the only peer dependency (supporting 16.13 through 19), and zero runtime dependencies otherwise. Built with Rollup (rollup-plugin-typescript2, Babel plugins) into parallel ES5 and ESM (lib/index.es5.js, lib/index.js) bundles, distributed via files: ["lib"]. Package management and CI use pnpm; Storybook powers the live demo, deployed to GitHub Pages via gh-pages.

Code Quality The project has a substantial Playwright component-test suite (src/index.spec.tsx, using @playwright/experimental-ct-react and sinon for spies) covering sizing modes, relative units (vw/vh/vmin/vmax), and callback behavior. tsconfig.json runs in strict mode, and CI (GitHub Actions) runs three separate jobs — lint, tsc, and test — on every push and PR. Linting still uses legacy tslint rather than eslint, which is dated but functional and paired with Prettier for formatting.

What Makes It Unique Resizable wrapper components are a well-trodden pattern (react-rnd, interact.js, and similar libraries all solve the same problem), so the core idea isn’t novel. What distinguishes this implementation is its attention to detail: zero runtime dependencies, careful handling of relative units (percentages, vw/vh/vmin/vmax) for both size and min/max constraints rather than pixels only, a scale prop that corrects resize math when nested inside a CSS-transformed ancestor, and lockAspectRatioExtraWidth/Height for keeping media aspect-locked alongside a fixed-size sidebar or header — the kind of edge cases most hand-rolled resize implementations miss.