0.0.3 • Published 3 years ago
react-split-viewport v0.0.3
react-split-viewport
It splits view in half
Install
npm install --save react-split-viewportUsage
import React from 'react';
import { SplitView } from 'react-split-viewport';
const App = () => (
<SplitView
initWidth={45}
range={{
min: 25,
max: 75
}}
left=<div>Left</div>
right=<div>Right</div>
/>
);
export default App;Props
| Name | Description | Default | Value |
|---|---|---|---|
| initWidth | Initial width of the right side.(Initial left side will be calculated with respect to this value) | 50 | number |
| left | Content for left side | Left | element |
| right | Content for right side | Right | element |
| range | Minimum and maximum adjustment levels | { min: 25, max: 75 } | { min: number, max: number } |
| onResize | Resize callback | null | func |
| resizeProps | Style property for resize bar | { bgColor: '#322f3d', width: 10, height: { val: 100, unit: '%' } } | { bgColor: string, width: number, height: { val: number, unit: string } } |
| resizeHandlerProps | Style property for resize handler | { markup: , position: { x: 50, y: 50, unit: '%' } } | { markup: element, position: { x: number, y: number, unit: string } } |
| showSwitcher | Switcher visibility | true | bool |
| onSwitchClick | Switch click callback | null | func |
| switcherProps | Style property for switch button | { markup: , position: { x: 10, y: 10, unit: 'px' } } | { markup: element, position: { x: number, y: number, unit: string } } |
License
MIT © mertNalcaci