A set of React components to create split panels & layouts that are resizable and/or collapsible.
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;
};
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