1.0.5 • Published 2 years ago
react-split-views v1.0.5
✂ React Split Views
Utility for resizable split views.
- Fast And Simple to use.
- Lightweight.
- Zero dependencies.
- No events listeners are attached to Window.
- Compatible: Firefox - Chrome - Safari - Opera - Android - (FlexBox is not supported in IE).
Demo
Codesandbox Demo
$ npm i react-split-views
# or
$ yarn add react-split-viewsUsage
import ReactSplitViews from 'react-split-views';
<ReactSplitViews
direction="horizontal"
sizes={[25, 50, 25]} // required
>
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</ReactSplitViews>Props
| Name | Type | Default | Description |
|---|---|---|---|
className | String | 'split-view' | Class name of Parent element. |
style | Object | { display: "flex" } | Css style for Parent element. |
sizes | Array<Number> | [] | Initial sizes of each element in %. |
minSize | Number | 0 | Minimum size. |
gutterSize | Number | 5 | Gutter size (seperator). |
direction | String | 'horizontal' | Resize direction: horizontal or vertical. |
onDragEnd | Method | null | Callback with new sizes in %. |
Notes
- Tested on Chrome 67, Firefox 67, Edge 70, Opera 67, Safari 11, Android (>= 4).
- React Split Views is flex-based.
- React Split Views built on top SplitViews.
- All pull requests are welcome, feel free.
License
MIT