@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

Read the full docs

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