react-resizable-panels

What is react-resizable-panels?

The react-resizable-panels package allows developers to create resizable panel layouts in React applications. It provides a flexible and easy-to-use API for creating panels that users can resize by dragging the edges.

What are react-resizable-panels's main functionalities?

Basic Resizable Panel

This code demonstrates how to create a basic resizable panel layout with two panels. Users can resize the panels by dragging the divider between them.

import { Panel, PanelGroup } from 'react-resizable-panels';

function App() {
  return (
    <PanelGroup>
      <Panel>
        <div>Panel 1</div>
      </Panel>
      <Panel>
        <div>Panel 2</div>
      </Panel>
    </PanelGroup>
  );
}

Nested Resizable Panels

This code demonstrates how to create nested resizable panels. The second panel contains a vertical PanelGroup with two nested panels, allowing for more complex layouts.

import { Panel, PanelGroup } from 'react-resizable-panels';

function App() {
  return (
    <PanelGroup>
      <Panel>
        <div>Panel 1</div>
      </Panel>
      <Panel>
        <PanelGroup direction="vertical">
          <Panel>
            <div>Panel 2.1</div>
          </Panel>
          <Panel>
            <div>Panel 2.2</div>
          </Panel>
        </PanelGroup>
      </Panel>
    </PanelGroup>
  );
}

Customizing Panel Sizes

This code demonstrates how to customize the sizes of the panels. The first panel has a default size of 30%, a minimum size of 20%, and a maximum size of 50%. The second panel has a default size of 70%, a minimum size of 50%, and a maximum size of 80%.

import { Panel, PanelGroup } from 'react-resizable-panels';

function App() {
  return (
    <PanelGroup>
      <Panel defaultSize={30} minSize={20} maxSize={50}>
        <div>Panel 1</div>
      </Panel>
      <Panel defaultSize={70} minSize={50} maxSize={80}>
        <div>Panel 2</div>
      </Panel>
    </PanelGroup>
  );
}

Other packages similar to react-resizable-panels

react-split-pane

react-split-pane is a React component for creating resizable split views or panes. It offers similar functionality to react-resizable-panels but with a different API. It is widely used and has a large community.

react-grid-layout

react-grid-layout is a grid layout system for React that allows for draggable and resizable grid items. While it provides more complex grid-based layouts compared to react-resizable-panels, it can also be used to create resizable panels.

react-mosaic-component

react-mosaic-component is a React library for creating resizable, nested, and draggable panels. It offers more advanced features like drag-and-drop rearrangement and nested layouts, making it a more feature-rich alternative to react-resizable-panels.

README

react-resizable-panels

React components for resizable panel groups/layouts

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

<PanelGroup autoSaveId="example" direction="horizontal">
  <Panel defaultSize={0.3} id="left">
    <SourcesExplorer />
  </Panel>
  <Panel defaultSize={0.5} id="middle">
    <PanelResizeHandle />
    <SourceViewer />
    <PanelResizeHandle />
  </Panel>
  <Panel defaultSize={0.2} id="right">
    <Console />
  </Panel>
</PanelGroup>

Props

PanelGroup

prop	type	description
autoSaveId	?string	Unique id used to auto-save group arrangement via localStorage
children	ReactNode	Arbitrary React element(s)
className	?string	Class name
direction	"horizontal" | "vertical"	Group orientation
height	number	Height of group (in pixels)
width	number	Width of group (in pixels)

Panel

prop	type	description
children	ReactNode	Arbitrary React element(s)
className	?string	Class name
defaultSize	?number	Initial size of panel (relative to other panels within the group)
id	string	Panel id (must be unique within the current group)
minSize	?number	Minum allowable size of panel (0.0 - 1.0)
order	?number	Order of panel within group; required for groups with conditionally rendered panels

PanelResizeHandle

prop	type	description
children	?ReactNode	Custom drag UI; can be any arbitrary React element(s)
className	?string	Class name
disabled	?boolean	Disable drag handle