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={25}>
    <SourcesExplorer />
  </Panel>
  <PanelResizeHandle />
  <Panel>
    <SourceViewer />
  </Panel>
  <PanelResizeHandle />
  <Panel defaultSize={25}>
    <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 to attach to root element
direction	"horizontal" | "vertical"	Group orientation
disablePointerEventsDuringResize	?boolean = false	Disable pointer events inside Panels during resize 2
id	?string	Group id; falls back to useId when not provided
onLayout	?(sizes: number[]) => void	Called when group layout changes
storage	?PanelGroupStorage	Custom storage API; defaults to localStorage 1
style	?CSSProperties	CSS style to attach to root element
tagName	?string = "div"	HTML element tag name for root element

¹: Storage API must define the following synchronous methods:

• getItem: (name:string) => string
• setItem: (name: string, value: string) => void

²: This behavior is disabled by default because it can interfere with scrollbar styles, but it can be useful in the edge case where a Panel contains an <iframe>

Panel

prop	type	description
children	ReactNode	Arbitrary React element(s)
className	?string	Class name to attach to root element
collapsible	?boolean=false	Panel should collapse when resized beyond its minSize
defaultSize	?number	Initial size of panel (numeric value between 1-100)
id	?string	Panel id (unique within group); falls back to useId when not provided
maxSize	?number = 100	Maximum allowable size of panel (numeric value between 1-100); defaults to 100
minSize	?number = 10	Minimum allowable size of panel (numeric value between 1-100); defaults to 10
onCollapse	?(collapsed: boolean) => void	Called when panel is collapsed; collapsed boolean parameter reflecting the new state
onResize	?(size: number) => void	Called when panel is resized; size parameter is a numeric value between 1-100. 1
order	?number	Order of panel within group; required for groups with conditionally rendered panels
style	?CSSProperties	CSS style to attach to root element
tagName	?string = "div"	HTML element tag name for root element

¹: If any Panel has an onResize callback, the order prop should be provided for all Panels.

Panel components also expose an imperative API for manual resizing:

method	description
collapse()	If panel is collapsible, collapse it fully.
expand()	If panel is currently collapsed, expand it to its most recent size.
getCollapsed(): boolean	Returns true if the panel is currently collapsed (size === 0).
getSize(): number	Returns the most recently commited size of the panel as a percentage (1 - 100).
resize(percentage: number)	Resize panel to the specified percentage (1 - 100).

PanelResizeHandle

prop	type	description
children	?ReactNode	Custom drag UI; can be any arbitrary React element(s)
className	?string	Class name to attach to root element
disabled	?boolean	Disable drag handle
id	?string	Resize handle id (unique within group); falls back to useId when not provided
onDragging	?(isDragging: boolean) => void	Called when group layout changes
style	?CSSProperties	CSS style to attach to root element
tagName	?string = "div"	HTML element tag name for root element

---

If you like this project, buy me a coffee.