https://github.com/bvaughn/react-resizable-panels

https://github.com/bvaughn/react-resizable-panels

group layout panel react resizable

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/bvaughn/react-resizable-panels
• Owner: bvaughn
• License: mit
• Created: 2022-12-22T19:06:17.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-27T14:09:07.000Z (about 2 months ago)
• Last Synced: 2024-10-29T15:12:56.895Z (about 1 month ago)
• Topics: group, layout, panel, react, resizable
• Language: TypeScript
• Homepage: https://react-resizable-panels.vercel.app/
• Size: 843 KB
• Stars: 3,932
• Watchers: 5
• Forks: 139
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• jimsghstars - bvaughn/react-resizable-panels - (TypeScript)
• my-awesome-list - react-resizable-panels

README

        


## react-resizable-panels

React components for resizable panel groups/layouts.

- [View the website](https://react-resizable-panels.vercel.app/)

- [Try it on CodeSandbox](https://codesandbox.io/s/react-resizable-panels-zf7hwd)

- [Read the documentation](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels)

- [View the changelog](https://github.com/bvaughn/react-resizable-panels/blob/main/packages/react-resizable-panels/CHANGELOG.md)

Supported input methods include mouse, touch, and keyboard (via [Window Splitter](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)).

---

### If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/)

---

## FAQ

### Can panel sizes be specified in pixels?

No. Pixel-based constraints [added significant complexity](https://github.com/bvaughn/react-resizable-panels/pull/176) 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](https://github.com/bvaughn/react-resizable-panels/issues/46#issuecomment-1368108416) but it is not officially supported by this library.

### 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.

```tsx

  {renderSideBar && (

    <>

      

        

      

      

    >

  )}

  

    

  

```

### Can I attach a ref to the DOM elements?

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:

```tsx

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 (

    

      {/* ... */}

      

      {/* ... */}

    

  );

}

```

### Why don't I see any resize UI?

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:

```tsx

// Tailwind example

```

### Can panel sizes be persistent?

Yes. Panel groups with an `autoSaveId` prop will automatically save and restore their layouts on mount.

### 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

```tsx

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 ;

}

```

#### Client component

```tsx

"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 (

    

      {/* ... */}

      

      {/* ... */}

    

  );

}

```

> [!NOTE]

> Be sure to specify a `defaultSize` prop for **every** `Panel` component to avoid layout flicker.

A demo of this is available [here](https://github.com/bvaughn/react-resizable-panels-demo-ssr).

#### How can I set the [CSP `"nonce"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) attribute?

```js

import { setNonce } from "react-resizable-panels";

setNonce("your-nonce-value-here");

```

#### How can I disable global cursor styles?

```js

import { disableGlobalCursorStyles } from "react-resizable-panels";

disableGlobalCursorStyles();

```