Splitter

React component for building split views like in VS Code

Window managementLayoutDrag and dropReact
devbookhq/splitter@devbookhq/splitter

README

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:
undefined

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

  1. ```
  2. npm install @devbookhq/splitter
  3. # or
  4. yarn add @devbookhq/splitter
  5. ```

Usage


Horizontal split

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

  4. function MyComponent() {
  5.   return (
  6.     <Splitter>
  7.       <div>Tile 1</div>
  8.       <div>Tile 2</div>
  9.     </Splitter>
  10.   );
  11. }
  12. ```

Vertical split

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

  4. function MyComponent() {
  5.   return (
  6.     <Splitter direction={SplitDirection.Vertical}>
  7.       <div>Tile 1</div>
  8.       <div>Tile 2</div>
  9.     </Splitter>
  10.   );
  11. }
  12. ```

Nested split

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

  4. function MyComponent() {
  5.   return (
  6.     <Splitter direction={SplitDirection.Vertical}>
  7.       <div>Tile 1</div>
  8.       <Splitter direction={SplitDirection.Horizontal}>
  9.         <div>Tile 2</div>
  10.         <Splitter direction={SplitDirection.Vertical}>
  11.           <div>Tile 3</div>
  12.           <div>Tile 4</div>
  13.         </Splitter>
  14.       </Splitter>
  15.     </Splitter>
  16.   );
  17. }
  18. ```

Get sizes of tiles

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

  4. function MyComponent() {
  5.   function handleResizeStarted(gutterIdx: number) {
  6.     console.log('Resize started!', gutterIdx);
  7.   }
  8.   function handleResizeFinished(gutterIdx: number, newSizes: number[]) {
  9.     console.log('Resize finished!', gutterIdx, newSizes);
  10.   }

  12.   return (
  13.     <Splitter
  14.       direction={SplitDirection.Vertical}
  15.       onResizeStarted={handleResizeStarted}
  16.       onResizeFinished={handleResizeFinished}
  17.     >
  18.       <div>Tile 1</div>
  19.       <div>Tile 2</div>
  20.     </Splitter>
  21.   );
  22. }
  23. ```

To see more examples check out the examples section.

Examples

Check the [example](./example/src/App.tsx) folder or the CodeSandbox project.
- Horizontal
- Vertical
- Nested
- Styled gutter
- Minimal tile size
- Initial tile sizes
- Scrollable tiles
- Get sizes of tiles