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={0.3} id="left">
    <SourcesExplorer />
  </Panel>
  <Panel defaultSize={0.5} id="middle">
    <PanelResizeHandle />
    <SourceViewer />
    <PanelResizeHandle />
  </Panel>
  <Panel defaultSize={0.2} id="right">
    <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
`height`	`number`	Height of group (in pixels)
`width`	`number`	Width of group (in pixels)

`Panel`

prop	type	description
`children`	`ReactNode`	Arbitrary React element(s)
`className`	`?string`	Class name
`defaultSize`	`?number`	Initial size of panel (relative to other panels within the group)
`id`	`string`	Panel id (must be unique within the current group)
`minSize`	`?number`	Minum allowable size of panel (0.0 - 1.0)
`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 (must be unique within the current group)

`PanelContext`

prop	type	description
`activeHandleId`	`string \| null`	Resize handle currently being dragged (or `null`)