react-resizable-panels
Advanced tools
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.
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>
);
}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 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 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.
React components for resizable panel groups/layouts
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
<PanelGroup autoSaveId="example" direction="horizontal">
<Panel defaultSizePercentage={25}>
<SourcesExplorer />
</Panel>
<PanelResizeHandle />
<Panel>
<SourceViewer />
</Panel>
<PanelResizeHandle />
<Panel defaultSizePercentage={25}>
<Console />
</Panel>
</PanelGroup>;
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 |
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 |
1: Storage API must define the following synchronous methods:
getItem: (name:string) => stringsetItem: (name: string, value: string) => voidPanelGroup components also expose an imperative API for manual resizing:
| method | description |
|---|---|
getId(): string | Gets the panel group's ID. |
getLayout(): number[] | Gets the panel group's current layout ([1 - 100, ...]). |
setLayout(layout: number[]) | Resize panel group to the specified layout ([1 - 100, ...]). |
Panel| prop | type | description |
|---|---|---|
children | ReactNode | Arbitrary React element(s) |
className | ?string | Class name to attach to root element |
collapsedSize | ?number=0 | Panel should collapse to this size |
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 | ?() => void | Called when panel is collapsed |
onExpand | ?() => void | Called when panel is expanded |
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 |
1: 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. |
getId(): string | Gets the ID of the panel. |
getSize(): number | Gets the current size of the panel as a percentage (1 - 100). |
isCollapsed(): boolean | Returns true if the panel is currently collapsed (size === 0). |
isExpanded(): boolean | Returns true if the panel is currently not collapsed (!isCollapsed()). |
getSize(): number | Returns the most recently commited size of the panel as a percentage (1 - 100). |
resize(size: 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 |
No. Pixel-based constraints added significant complexity to the initialization and validation logic and so I've decided not to support them. You may be able to implement a version of this yourself following a pattern like this but it is not officially supported by this library.
The Panel API doesn't require id and order props because they aren't necessary for static layouts. When panels are conditionally rendered though, it's best to supply these values.
<PanelGroup direction="horizontal">
{renderSideBar && (
<>
<Panel id="sidebar" minSize={25} order={1}>
<Sidebar />
</Panel>
<PanelResizeHandle />
</>
)}
<Panel minSize={25} order={2}>
<Main />
</Panel>
</PanelGroup>
By default, this library uses localStorage to persist layouts. With server rendering, this can cause a flicker when the default layout (rendered on the server) is replaced with the persisted layout (in localStorage). The way to avoid this flicker is to also persist the layout with a cookie like so:
import ResizablePanels from "@/app/ResizablePanels";
import { cookies } from "next/headers";
export function ServerComponent() {
const layout = cookies().get("react-resizable-panels:layout");
let defaultLayout;
if (layout) {
defaultLayout = JSON.parse(layout.value);
}
return <ClientComponent defaultLayout={defaultLayout} />;
}
"use client";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
export function ClientComponent({
defaultLayout = [33, 67],
}: {
defaultLayout: number[] | undefined;
}) {
const onLayout = (sizes: number[]) => {
document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
};
return (
<PanelGroup direction="horizontal" onLayout={onLayout}>
<Panel defaultSize={defaultLayout[0]}>{/* ... */}</Panel>
<PanelResizeHandle className="w-2 bg-blue-800" />
<Panel defaultSize={defaultLayout[1]}>{/* ... */}</Panel>
</PanelGroup>
);
}
No. Pixel-based constraints added significant complexity to the initialization and validation logic and so I've decided not to support them. You may be able to implement a version of this yourself following a pattern like this but it is not officially supported by this library.
No. I think exposing two refs (one for the component's imperative API and one for a DOM element) would be awkward. This library does export several utility methods for accessing the underlying DOM elements though. For example:
import {
getPanelElement,
getPanelGroupElement,
getResizeHandleElement,
Panel,
PanelGroup,
PanelResizeHandle,
} from "react-resizable-panels";
export function Example() {
const refs = useRef();
useEffect(() => {
const groupElement = getPanelGroupElement("group");
const leftPanelElement = getPanelElement("left-panel");
const rightPanelElement = getPanelElement("right-panel");
const resizeHandleElement = getResizeHandleElement("resize-handle");
// If you want to, you can store them in a ref to pass around
refs.current = {
groupElement,
leftPanelElement,
rightPanelElement,
resizeHandleElement,
};
}, []);
return (
<PanelGroup direction="horizontal" id="group">
<Panel id="left-panel">{/* ... */}</Panel>
<PanelResizeHandle id="resize-handle" />
<Panel id="right-panel">{/* ... */}</Panel>
</PanelGroup>
);
}
This likely means that you haven't applied any CSS to style the resize handles. By default, a resize handle is just an empty DOM element. To add styling, use the className or style props:
// Tailwind example
<PanelResizeHandle className="w-2 bg-blue-800" />
The Panel API doesn't require id and order props because they aren't necessary for static layouts. When panels are conditionally rendered though, it's best to supply these values.
<PanelGroup direction="horizontal">
{renderSideBar && (
<>
<Panel id="sidebar" minSize={25} order={1}>
<Sidebar />
</Panel>
<PanelResizeHandle />
</>
)}
<Panel minSize={25} order={2}>
<Main />
</Panel>
</PanelGroup>
By default, this library uses localStorage to persist layouts. With server rendering, this can cause a flicker when the default layout (rendered on the server) is replaced with the persisted layout (in localStorage). The way to avoid this flicker is to also persist the layout with a cookie like so:
import ResizablePanels from "@/app/ResizablePanels";
import { cookies } from "next/headers";
export function ServerComponent() {
const layout = cookies().get("react-resizable-panels:layout");
let defaultLayout;
if (layout) {
defaultLayout = JSON.parse(layout.value);
}
return <ClientComponent defaultLayout={defaultLayout} />;
}
"use client";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
export function ClientComponent({
defaultLayout = [33, 67],
}: {
defaultLayout: number[] | undefined;
}) {
const onLayout = (sizes: number[]) => {
document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
};
return (
<PanelGroup direction="horizontal" onLayout={onLayout}>
<Panel defaultSize={defaultLayout[0]}>{/* ... */}</Panel>
<PanelResizeHandle className="w-2 bg-blue-800" />
<Panel defaultSize={defaultLayout[1]}>{/* ... */}</Panel>
</PanelGroup>
);
}
A demo of this is available here.
FAQs
React components for resizable panel groups/layouts
The npm package react-resizable-panels receives a total of 256,939 weekly downloads. As such, react-resizable-panels popularity was classified as popular.
We found that react-resizable-panels demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.