@alisowski/react-resizable-panels
v0.1.27
Published
React components for resizable panel groups/layouts
Readme
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).