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) => string
• setItem: (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

If you like this project, buy me a coffee.