react-window-splitter

Simple

The most basic example of the window splitter presents just two panels.

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

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

Vertical

You can also split the area vertically by using the orientation prop.

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

function VerticalExample() {
  return (
    <PanelGroup orientation="vertical">
      <Panel min="50px" max="300px" />
      <PanelResizer />
      <Panel min="50px" />
    </PanelGroup>
  );
}