React Resizable & Collapsible Panels

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

#react #reactjs