Resizable
The Resizable component is an accessible, resizable panel group and layout tool built on top of `react-resizable-panels`, featuring keyboard support. It provides a flexible, user-friendly interface for adjusting and organizing content areas, enhancing control and customization within the layout.
Additional Examples
Vertical
Use the direction prop to set the direction of the resizable panels.
Handle
You can set or hide the handle by using the withHandle prop on the ResizableHandle component.
Configurable Props
<ResizablePanelGroup>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
autoSaveId | string | Unique id used to auto-save group arrangement via localStorage | |
direction | "horizontal" | "vertical" | Group orientation | |
id | string | Group id; falls back to useId when not provided |
<ResizablePanel>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
collapsedSize | number | Panel should collapse to this size | |
collapsible | boolean | false | Panel should collapse when resized beyond its minSize |
defaultSize | number | Initial size of panel (numeric value between 1-100) | |
id | string | Panel id (unique within group); falls back to useId when not provided | |
maxSize | number | 100 | Maximum allowable size of panel (numeric value between 1-100) |
minSize | number | 10 | Minimum allowable size of panel (numeric value between 1-100) |
onCollapse | function () => void | 10 | Called when panel is collapsed |
onExpand | function () => void | 10 | Called when panel is collapsed |
onResize | (size: number) => void | 10 | Called when panel is collapsed |
<ResizableHandle>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
disabled | boolean | Disable drag handle | |
id | string | Resize handle id (unique within group); falls back to useId when not provided |