devbookhq / splitter

React component for building split views like in VS Code

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.

• Horizontal
• Vertical
• Nested
• Styled gutter
• Minimal tile size
• Initial tile sizes
• Scrollable tiles
• Get sizes of tiles