`@window-splitter/react`

A full featured window splitter for React.

Support for the full window splitter ARIA spec
Support for percentage and pixel based constraints
Collapsible panels
Controlled panels
Layout Persistance - LocalStorage and Cookie

Install

npm install @window-splitter/react
yarn add @window-splitter/react
pnpm add @window-splitter/react

Usage

import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react";

function Example() {
  return (
    <PanelGroup>
      <Panel min="130px" max="400px" />
      <PanelResizer />
      <Panel min="130px" />
    </PanelGroup>
  );
}

Server Side Rendering + Strict Mode

While not required for the simple case, for anything more complex you will need to add an id prop to your panels and handles. This is so that the component can tell all of the components apart during layout and rendering.

Features that require id:

Conditional Panels
Server Side Rendering
React Strict Mode

Prior Art

This library is heavily inspired by the following libraries:

react-resizable-panels