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
calcwith minimal JS. This makes it much faster - Fully responsive
- No dependencies beside React
- Minimal assumptions about your styling and views
npm install @devbookhq/splitter
# or
yarn add @devbookhq/splitter
import Splitter, { SplitDirection } from '@devbookhq/splitter' function MyComponent() { return ( <Splitter> <div>Tile 1</div> <div>Tile 2</div> </Splitter> ); }
import Splitter, { SplitDirection } from '@devbookhq/splitter' function MyComponent() { return ( <Splitter direction={SplitDirection.Vertical}> <div>Tile 1</div> <div>Tile 2</div> </Splitter> ); }
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> ); }
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.
Check the example folder or the CodeSandbox project.