An easy to use react split panel component with flexible constrains.
npm i split-panel-react
import SplitPanel from 'split-panel-react';
<SplitPanel> <div>Left side</div> <div>Right side</div> </SplitPanel>
const containerStyle = { height: "200px", border: "1px solid #e0e0e0", boxShadow: "0px 0px 6px -3px #8483DB" }; const dividerStyle = { background: "#ff90f9", width: "2px" }; <SplitPanel containerStyle={containerStyle} dividerStyle={dividerStyle} leftMaxWidth={700} leftMinWidth={100} rightMaxWidth={700} rightMinWidth={50} defaultLeftWidth={600} > <div>Left side</div> <div>Right side</div> </SplitPanel>
Left panel maximum width in pixels
Left panel minimum width in pixels
Right panel maximum width in pixels
Right panel minimum width in pixels
Left panel default width in pixels
Right panel default width in pixels
Default ration between the two side, scale: 1-100.
Example: 40 will set the width of the left panel to 40% of the container
The maximum ratio between the left and the right panels, scale: 1-100 example
The minimum ratio between the left and the right panels, scale: 1-100 example
Container's height in pixels
An object to style the container, example
An object to style the divider, example
A callback being fire when the divider starts moving
A callback being fire when on mouse up event from the divider
A callback being fire when the divider moves.
Divider width in pixels. For accuracy, indicate the divider width if changed in dividerStyle
- What happen if I have conflicted constrains?
split-panelrespects all constrains equally. The user need to make sure that the constrains does not conflict. For example: Here theleftMinWidthis bigger than theleftMaxWidth
<SplitPanel leftMaxWidth={200} leftMinWidth={300}> <div>a</div> <div>b</div> </SplitPanel>