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
`direction`	`"horizontal" \| "vertical"`	Group orientation
`id`	`?string`	Optional group id; falls back to `useId` when not provided

`Panel`

prop	type	description
`children`	`ReactNode`	Arbitrary React element(s)
`className`	`?string`	Class name
`defaultSize`	`?number`	Initial size of panel (numeric value between 1-100)
`id`	`?string`	Optional panel id (unique within group); falls back to `useId` when not provided
`minSize`	`?number`	Minimum allowable size of panel (numeric value between 1-100)
`order`	`?number`	Order of panel within group; required for groups with conditionally rendered panels

`PanelResizeHandle`

prop	type	description
`children`	`?ReactNode`	Custom drag UI; can be any arbitrary React element(s)
`className`	`?string`	Class name
`disabled`	`?boolean`	Disable drag handle
`id`	`?string`	Optional resize handle id (unique within group); falls back to `useId` when not provided