react-resizable-panels
React components for resizable panel groups/layouts
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
<PanelGroup autoSaveId="example" direction="horizontal">
<Panel defaultSize={25}>
<SourcesExplorer />
</Panel>
<PanelResizeHandle />
<Panel>
<SourceViewer />
</Panel>
<PanelResizeHandle />
<Panel defaultSize={25}>
<Console />
</Panel>
</PanelGroup>
If you like this project, 🎉 become a sponsor or ☕ buy me a coffee
Props
PanelGroup
| prop | type | description |
|---|---|---|
autoSaveId | ?string | Unique id used to auto-save group arrangement via localStorage |
children | ReactNode | Arbitrary React element(s) |
className | ?string | Class name to attach to root element |
direction | "horizontal" | "vertical" | Group orientation |
disablePointerEventsDuringResize | ?boolean = false | Disable pointer events inside Panels during resize 2 |
id | ?string | Group id; falls back to useId when not provided |
onLayout | ?(sizes: number[]) => void | Called when group layout changes |
storage | ?PanelGroupStorage | Custom storage API; defaults to localStorage 1 |
style | ?CSSProperties | CSS style to attach to root element |
tagName | ?string = "div" | HTML element tag name for root element |
1: Storage API must define the following synchronous methods:
getItem: (name:string) => stringsetItem: (name: string, value: string) => void
2: This behavior is disabled by default because it can interfere with scrollbar styles, but it can be useful in the edge case where a Panel contains an <iframe>
PanelGroup components also expose an imperative API for manual resizing:
| method | description |
|---|---|
setLayout(panelSizes: number[]) | Resize panel group to the specified panelSizes ([1 - 100, ...]). |
Panel
| prop | type | description |
|---|---|---|
children | ReactNode | Arbitrary React element(s) |
className | ?string | Class name to attach to root element |
collapsedSize | ?number=0 | 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); defaults to 100 |
minSize | ?number = 10 | Minimum allowable size of panel (numeric value between 1-100); defaults to 10 |
onCollapse | ?(collapsed: boolean) => void | Called when panel is collapsed; collapsed boolean parameter reflecting the new state |
onResize | ?(size: number) => void | Called when panel is resized; size parameter is a numeric value between 1-100. 1 |
order | ?number | Order of panel within group; required for groups with conditionally rendered panels |
style | ?CSSProperties | CSS style to attach to root element |
tagName | ?string = "div" | HTML element tag name for root element |
1: If any Panel has an onResize callback, the order prop should be provided for all Panels.
Panel components also expose an imperative API for manual resizing:
| method | description |
|---|---|
collapse() | If panel is collapsible, collapse it fully. |
expand() | If panel is currently collapsed, expand it to its most recent size. |
getCollapsed(): boolean | Returns true if the panel is currently collapsed (size === 0). |
getSize(): number | Returns the most recently commited size of the panel as a percentage (1 - 100). |
resize(percentage: number) | Resize panel to the specified percentage (1 - 100). |
PanelResizeHandle
| prop | type | description |
|---|---|---|
children | ?ReactNode | Custom drag UI; can be any arbitrary React element(s) |
className | ?string | Class name to attach to root element |
disabled | ?boolean | Disable drag handle |
id | ?string | Resize handle id (unique within group); falls back to useId when not provided |
onDragging | ?(isDragging: boolean) => void | Called when group layout changes |
style | ?CSSProperties | CSS style to attach to root element |
tagName | ?string = "div" | HTML element tag name for root element |