Splitter

Splitter is a React component that allows you to split views into resizable panels. Similar to tabs in Visual Studio Code, for example. Here's a gif of what you can build with Splitter:

Splitter is inspired by Split.js and written as 100% functional component:

All size calculation is done through CSS using calc with minimal JS. This makes it much faster
Fully responsive
No dependencies beside React
Minimal assumptions about your styling and views

CodeSandbox project

Installing

npm install @devbookhq/splitter
# or
yarn add @devbookhq/splitter

Usage

Horizontal split

import Splitter, { SplitDirection } from '@devbookhq/splitter'

function MyComponent() {
  return (
    <Splitter>
      <div>Tile 1</div>
      <div>Tile 2</div>
    </Splitter>
  );
}

Vertical split

import Splitter, { SplitDirection } from '@devbookhq/splitter'

function MyComponent() {
  return (
    <Splitter direction={SplitDirection.Vertical}>
      <div>Tile 1</div>
      <div>Tile 2</div>
    </Splitter>
  );
}

Nested split

import Splitter, { SplitDirection } from '@devbookhq/splitter'

function MyComponent() {
  return (
    <Splitter direction={SplitDirection.Vertical}>
      <div>Tile 1</div>
      <Splitter direction={SplitDirection.Horizontal}>
        <div>Tile 2</div>
        <Splitter direction={SplitDirection.Vertical}>
          <div>Tile 3</div>
          <div>Tile 4</div>
        </Splitter>
      </Splitter>
    </Splitter>
  );
}

Get sizes of tiles

import Splitter, { SplitDirection } from '@devbookhq/splitter'

function MyComponent() {
  function handleResizeStarted(gutterIdx: number) {
    console.log('Resize started!', gutterIdx);
  }
  function handleResizeFinished(gutterIdx: number, newSizes: number[]) {
    console.log('Resize finished!', gutterIdx, newSizes);
  }

  return (
    <Splitter
      direction={SplitDirection.Vertical}
      onResizeStarted={handleResizeStarted}
      onResizeFinished={handleResizeFinished}
    >
      <div>Tile 1</div>
      <div>Tile 2</div>
    </Splitter>
  );
}

To see more examples check out the examples section.

Examples

Check the example folder or the CodeSandbox project.