Create resizable split views - like in VS Code
npm install @devbookhq/splitterSplitter 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
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 (
onResizeStarted={handleResizeStarted}
onResizeFinished={handleResizeFinished}
>
Tile 1
Tile 2
);
}
`To see more examples check out the examples section.
Examples
Check the