bvaughn/react-resizable-panels

Summary

react-resizable-panels is a TypeScript React component library for building resizable panel layouts. It provides Group, Panel, and Separator components for one-dimensional layouts, plus Grid, Cell, and Gridline components for two-dimensional resizable grids. The library ships MIT-licensed code with TypeScript definitions bundled in the published package.

What it is useful for

This library fits interfaces where users need to allocate space between regions of content: IDE-style side-by-side editors, dashboards with collapsible sidebars, chat apps with a resizable message list, or tool palettes next to a canvas. A Group can be oriented horizontally or vertically (default is horizontal), and panel sizes accept percentages, pixels, em, rem, vh, and vw, so the same components work for both fixed-pane and fluid-pane designs.

Panels support minSize, maxSize, and collapsible with a configurable collapsedThreshold, and a defaultLayout prop lets layouts persist between page reloads. The optional Separator elements render role="separator" and required WAI-ARIA properties for keyboard accessibility, and Panel exposes an imperative API (collapse, expand, resize, getSize, isCollapsed) for programmatic control. The Grid component extends this to two dimensions, allowing resizable cells that can span rows and columns, with Gridline components handling the resize handles.

How engineers can use it

Install the package from npm:

npm install react-resizable-panels

A typical horizontal layout with a sidebar and main content:

import { Group, Panel, Separator } from "react-resizable-panels";

<Group orientation="horizontal">
  <Panel defaultSize="25%" minSize="15%">Sidebar</Panel>
  <Separator />
  <Panel defaultSize="75%" minSize="30%">Main content</Panel>
</Group>

Use onLayoutChanged to capture the final layout after the user releases the pointer, then feed it back into defaultLayout on remount for persistence.

Documented constraints to plan around: Panel and Cell elements must be direct DOM children of their parent Group or Grid; default inline styles cannot be overridden (overflow is the noted exception); percentage-based defaultSize values may cause a small layout shift during server rendering; and a Group must contain at least one Panel with preserve-relative-size behavior (the default) to scale correctly when its parent resizes. Refer to the project documentation for full API details and SSR guidance.