@wroud/react-split-view

@wroud/react-split-view is a lightweight, flexible React hook for creating resizable split views. It enables users to create both horizontal and vertical split layouts with minimal configuration.

Features

• Simple API: Create resizable split panes with a single hook.
• Lightweight: Minimal implementation with no external dependencies.
• Flexible: Support for both horizontal and vertical layouts.
• Sticky Edges: Optional snapping behavior when dragging near edges.
• Multiple Splits: Easily create complex nested layouts.
• TypeScript: Written in TypeScript for type safety.
• Pure ESM package

Installation

Install via npm:

npm install @wroud/react-split-view

Install via yarn:

yarn add @wroud/react-split-view

Documentation

For detailed usage and API reference, visit the documentation site.

Basic Usage

Horizontal Split (Default)

import { useSplitView } from "@wroud/react-split-view";

function HorizontalSplit() {
  const splitView = useSplitView<HTMLDivElement>();
  
  return (
    <div className="container">
      <div {...splitView.viewProps} className="panel">
        Left Panel
      </div>
      <div {...splitView.sashProps} className="sash" />
      <div className="panel">Right Panel</div>
    </div>
  );
}

Required CSS:

.container {
  display: flex;
  width: 100%;
  height: 100%;
}

.panel {
  flex: 1;
  overflow: auto;
}

.sash {
  width: 4px;
  background-color: #ccc;
  cursor: ew-resize;
}

Vertical Split

function VerticalSplit() {
  const splitView = useSplitView<HTMLDivElement>();
  
  return (
    <div className="container" style={{ flexDirection: "column" }}>
      <div {...splitView.viewProps} className="panel">
        Top Panel
      </div>
      <div {...splitView.sashProps} className="sash" />
      <div className="panel">Bottom Panel</div>
    </div>
  );
}

Advanced Features

Sticky Edges

Add snapping behavior when dragging near the edges:

const splitView = useSplitView<HTMLDivElement>({
  sticky: 20, // 20px sticky zone
});

Multiple/Nested Splits

function MultipleSplits() {
  const firstSplit = useSplitView<HTMLDivElement>();
  const secondSplit = useSplitView<HTMLDivElement>();

  return (
    <div className="container">
      <div {...firstSplit.viewProps} className="panel">
        Left Panel
      </div>
      <div {...firstSplit.sashProps} className="sash" />
      <div className="panel">
        <div className="container" style={{ flexDirection: "column" }}>
          <div {...secondSplit.viewProps} className="panel">
            Top-Right Panel
          </div>
          <div {...secondSplit.sashProps} className="sash" />
          <div className="panel">Bottom-Right Panel</div>
        </div>
      </div>
    </div>
  );
}

License

This project is licensed under the MIT License. See the LICENSE file for details.