@alisowski/react-resizable-panels NPM

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 `Panel`s 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>

`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.

`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