GitHub
2.22k
Created a year ago, last commit 10 days ago
20 contributors
380 commits
Stars added on GitHub, month by month
N/A
12
1
2
3
4
5
6
7
8
9
10
11
2022
2023
Stars added on GitHub, per day, on average
Yesterday
+1
Last week
+2.4 /day
Last month
+2.1 /day
Package on NPM
Monthly downloads on NPM
12
1
2
3
4
5
6
7
8
9
10
11
2022
2023
No dependencies
README

React Resizable Panels logo

react-resizable-panels

React components for resizable panel groups/layouts.

Supported input methods include mouse, touch, and keyboard (via Window Splitter).


If you like this project, 🎉 become a sponsor or ☕ buy me a coffee


FAQ

How can I fix layout/sizing problems with conditionally rendered panels?

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" minSizePercentage={25} order={1}>
        <Sidebar />
      </Panel>
      <PanelResizeHandle />
    </>
  )}
  <Panel minSizePercentage={25} order={2}>
    <Main />
  </Panel>
</PanelGroup>

How can I use persistent layouts with SSR?

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:

Server component
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} />;
}
Client component
"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 defaultSizePercentage={defaultLayout[0]}>{/* ... */}</Panel>
      <PanelResizeHandle className="w-2 bg-blue-800" />
      <Panel defaultSizePercentage={defaultLayout[1]}>{/* ... */}</Panel>
    </PanelGroup>
  );
}

A demo of this is available here.