Skip to content

tristandavey/react-ez-panels

Repository files navigation

react-ez-panels

A package to handle multi panel resizing. This implements the ARIA Window Splitter pattern so should be accessible. It's built with useGesture but this may change in future.

Features

  1. Multiple split panels (horizontal + vertical)
  2. Resizing via drag
  3. Resizing via the keyboard
  4. Nested panels
  5. Min / max sizes
  6. Min size snapping

Roadmap

  1. Min snap (like vscode)
  2. Tests
  3. Conditional panels

Ideas

  1. Drag to order panels
  2. Drag to nest panels

Example

import { PanelGroup, Panel, Splitter } from 'react-ez-panels';

function MyComponent() {
  return (
    <PanelGroup direction="horizontal">
      <Panel id="panel-1">
        ...
      </Panel>
      <Splitter id="splitter-1" />
      <Panel id="panel-2" >
        ...
      </Panel>
    </PanelGroup>
  );
}

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published