Resizable Panels For React

Description:

A resizable component for creating flexible, responsive, resizable panels & groups on React apps.

How to use it:

1. Install and import the component.

import { Panel, PanelGroup, PanelResizeHandle } from “react-resizable-panels”;

2. Add resizable groups to the app.

<PanelGroup autoSaveId="example" direction="horizontal">
  <Panel defaultSizePercentage={25}>
    <SourcesExplorer />
  </Panel>
  <PanelResizeHandle />
  <Panel>
    <SourceViewer />
  </Panel>
  <PanelResizeHandle />
  <Panel defaultSizePercentage={25}>
    <Console />
  </Panel>
</PanelGroup>;

Preview: