Resizable Panels For React

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:

Resizable Panels For React

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

Add Comment