Package Exports

react-resizable-panels
react-resizable-panels/dist/react-resizable-panels.js
react-resizable-panels/dist/react-resizable-panels.module.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-resizable-panels) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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>

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

`Panel`

prop	type	description
`children`	`ReactNode`	Arbitrary React element(s)
`className`	`?string`	Class name to attach to root element
`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. ¹
`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
`style`	`?CSSProperties`	CSS style to attach to root element
`tagName`	`?string = "div"`	HTML element tag name for root element