A set of React components to create split panels & layouts that are resizable and/or collapsible.
How to use it:
1. Install and import the components.
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
2. Add panels & resize handles to the PanelGroup.
<PanelGroup autoSaveId="example" direction="horizontal"> <Panel defaultSize={25}> <SourcesExplorer /> </Panel> <PanelResizeHandle /> <Panel> <SourceViewer /> </Panel> <PanelResizeHandle /> <Panel defaultSize={25}> <Console /> </Panel> </PanelGroup>
3. Available props for the PanelGroup.
export type PanelGroupProps = { autoSaveId?: string; children?: ReactNode; className?: string; direction: Direction; // "horizontal" | "vertical" id?: string | null; style?: CSSProperties; tagName?: ElementType; };
4. Available props for the Panel.
export type PanelProps = { children?: ReactNode; className?: string; collapsible?: boolean; defaultSize?: number | null; id?: string | null; maxSize?: number; minSize?: number; onCollapse?: PanelOnCollapse | null; onResize?: PanelOnResize | null; order?: number | null; style?: CSSProperties; tagName?: ElementType; };
5. Available props for the PanelResizeHandle.
export type PanelResizeHandleProps = { children?: ReactNode; className?: string; disabled?: boolean; id?: string | null; style?: CSSProperties; tagName?: ElementType; };
Preview:
Download Details:
Author: bvaughn
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/bvaughn/react-resizable-panels
License: MIT