react-resizable-panels

React components for resizable panel groups/layouts

1import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
2
3<PanelGroup autoSaveId="example" direction="horizontal">
4  <Panel defaultSize={25}>
5    <SourcesExplorer />
6  </Panel>
7  <PanelResizeHandle />
8  <Panel>
9    <SourceViewer />
10  </Panel>
11  <PanelResizeHandle />
12  <Panel defaultSize={25}>
13    <Console />
14  </Panel>
15</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

¹: Storage API must define the following synchronous methods:

• getItem: (name:string) => string
• setItem: (name: string, value: string) => void

²: 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

¹: 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

---

If you like this project, buy me a coffee.