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

$3

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

function MyComponent() {
return (

Tile 1

Tile 2

);
}
`

$3

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

function MyComponent() {
return (

Tile 1

Tile 2

);
}
`

$3

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

function MyComponent() {
return (

Tile 1

Tile 2

Tile 3

Tile 4

);
}
`

$3

`tsx
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 (
direction={SplitDirection.Vertical}
onResizeStarted={handleResizeStarted}
onResizeFinished={handleResizeFinished}
>

Tile 1

Tile 2

);
}
`

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