@devbookhq/splitter

Splitter

Splitter is a React component that allows you to split views into resizable panels. Similar to tabs in Visual Studio Code, for example. It's used in Devbook - A Search Engine for Developers. 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
• Fully responsive
• No dependencies beside React and styled-components
• Minimal assumptions about your styling and views

CodeSandbox project

Installing

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

Usage

Horizontal split

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

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

Vertical split

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

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

Nested split

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

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

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