react-split-viewport

It splits view in half

Install

npm install --save react-split-viewport

Usage

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