{"library":"react-resizable-panels","title":"React Resizable Panels","description":"react-resizable-panels provides a robust and accessible solution for building resizable panel groups and layouts in React applications. Currently at version 4.10.0, the library maintains an active development pace with frequent patch and minor releases, reflecting ongoing enhancements and bug fixes. Key differentiators include flexible size constraints supporting various units (pixels, percentages, REMs/EMs, viewport units), improved server-side rendering support for both traditional SSR and React Server Components, and a declarative API complemented by imperative escape hatches via refs. It focuses on smooth user interactions with drag, double-click to reset, and keyboard accessibility for resizing, making it suitable for complex UIs like IDEs or dashboards. The library also supports persistent layouts via `useDefaultLayout` and offers granular control over resize behavior, building on a foundation of performance and robustness by its author.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-resizable-panels"],"cli":null},"imports":["import { Group } from 'react-resizable-panels';","import { Panel } from 'react-resizable-panels';","import { Separator } from 'react-resizable-panels';","import { useDefaultLayout } from 'react-resizable-panels';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { Group, Panel, Separator } from 'react-resizable-panels';\n\nfunction MyResizableLayout() {\n  const onLayoutChange = (sizes: number[]) => {\n    // This callback fires frequently during drag. For saving, prefer onLayoutChanged.\n    console.log('Layout changing:', sizes);\n  };\n\n  const onLayoutChanged = (sizes: number[]) => {\n    // This callback fires once after dragging is complete.\n    console.log('Layout changed and settled:', sizes);\n    // You might save `sizes` to localStorage here, e.g.,\n    // localStorage.setItem('my-app-layout', JSON.stringify(sizes));\n  };\n\n  return (\n    <div style={{ height: '500px', display: 'flex', border: '1px solid #ccc' }}>\n      <Group direction=\"horizontal\" onLayoutChange={onLayoutChange} onLayoutChanged={onLayoutChanged}>\n        <Panel defaultSize={20} minSize={10}>\n          <div style={{ padding: '10px', background: '#f0f0f0', height: '100%' }}>\n            Sidebar\n          </div>\n        </Panel>\n        <Separator style={{ background: '#ddd', width: '8px', cursor: 'ew-resize' }} />\n        <Panel defaultSize={60} minSize={30}>\n          <Group direction=\"vertical\">\n            <Panel defaultSize={70} minSize={20}>\n              <div style={{ padding: '10px', background: '#e0e0e0', height: '100%' }}>\n                Main Content (Top)\n              </div>\n            </Panel>\n            <Separator style={{ background: '#ccc', height: '8px', cursor: 'ns-resize' }} />\n            <Panel defaultSize={30} minSize={15}>\n              <div style={{ padding: '10px', background: '#d0d0d0', height: '100%' }}>\n                Main Content (Bottom)\n              </div>\n            </Panel>\n          </Group>\n        </Panel>\n        <Separator style={{ background: '#bbb', width: '8px', cursor: 'ew-resize' }} />\n        <Panel defaultSize={20} minSize={10}>\n          <div style={{ padding: '10px', background: '#c0c0c0', height: '100%' }}>\n            Right Panel\n          </div>\n        </Panel>\n      </Group>\n    </div>\n  );\n}\n\nexport default MyResizableLayout;\n","lang":"typescript","description":"This quickstart demonstrates a nested resizable layout using `Group`, `Panel`, and `Separator` components, showcasing horizontal and vertical orientations and how to handle layout changes.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}