https://github.com/devbookhq/splitter
React component for building split views like in VS Code
https://github.com/devbookhq/splitter
devbook javascript react resize split typescript
Last synced: 8 months ago
JSON representation
React component for building split views like in VS Code
- Host: GitHub
- URL: https://github.com/devbookhq/splitter
- Owner: devbookhq
- License: mit
- Created: 2021-02-21T22:39:13.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-24T03:26:16.000Z (over 2 years ago)
- Last Synced: 2025-05-11T15:02:52.634Z (9 months ago)
- Topics: devbook, javascript, react, resize, split, typescript
- Language: TypeScript
- Homepage: https://usedevbook.com
- Size: 12.6 MB
- Stars: 446
- Watchers: 4
- Forks: 31
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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:
Splitter is inspired by [Split.js](https://split.js.org/) 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](https://codesandbox.io/s/devbookhqspliiter-example-l23s4)
## Installing
```
npm install @devbookhq/splitter
# or
yarn add @devbookhq/splitter
```
## Usage
### Horizontal split
```tsx
import Splitter, { SplitDirection } from '@devbookhq/splitter'
function MyComponent() {
return (
Tile 1
Tile 2
);
}
```
### Vertical split
```tsx
import Splitter, { SplitDirection } from '@devbookhq/splitter'
function MyComponent() {
return (
Tile 1
Tile 2
);
}
```
### Nested split
```tsx
import Splitter, { SplitDirection } from '@devbookhq/splitter'
function MyComponent() {
return (
Tile 1
Tile 2
Tile 3
Tile 4
);
}
```
### Get sizes of tiles
```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 (
Tile 1
Tile 2
);
}
```
To see more examples check out the [examples](#Example) section.
## Examples
Check the [`example`](./example/src/App.tsx) folder or the [CodeSandbox project](https://codesandbox.io/s/devbookhqspliiter-example-l23s4).
- [Horizontal](./example/src/HorizontalSplit/index.tsx)
- [Vertical](./example/src/VerticalSplit/index.tsx)
- [Nested](./example/src/NestedSplit/index.tsx)
- [Styled gutter](./example/src/StyledGutter/index.tsx)
- [Minimal tile size](./example/src/MinSize/index.tsx)
- [Initial tile sizes](./example/src/InitialSizes/index.tsx)
- [Scrollable tiles](./example/src/ScrollableChildren/index.tsx)
- [Get sizes of tiles](./example/src/OnDidResize/index.tsx)