react-window-splitter

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 react-window-splitter
yarn add react-window-splitter
pnpm add react-window-splitter

Usage

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

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

Features that require id:

• Conditional Panels
• Server Side Rendering
• React Strict Mode