split-panel-react v1.0.6
About
An easy to use react split panel component with flexible constrains.
Installation
npm i split-panel-react
Usage
import SplitPanel from 'split-panel-react';
<SplitPanel>
<div>Left side</div>
<div>Right side</div>
</SplitPanel>
Advanced Usage
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>
Props
leftMaxWidth (number default: null
)
Left panel maximum width in pixels
leftMinWidth (number, default: null
)
Left panel minimum width in pixels
rightMaxWidth (number default: null
)
Right panel maximum width in pixels
rightMinWidth (number default: null
)
Right panel minimum width in pixels
defaultLeftWidth (number default: null
)
Left panel default width in pixels
defaultRightWidth (number default: null
)
Right panel default width in pixels
defaultRatio (number default: 50
)
Default ration between the two side, scale: 1-100.
Example: 40
will set the width of the left panel to 40% of the container
maxRatio (number default: null`)
The maximum ratio between the left and the right panels, scale: 1-100 example
minRatio (number default: 50
)
The minimum ratio between the left and the right panels, scale: 1-100 example
height (number default: null
)
Container's height in pixels
containerStyle (object default: {}
)
An object to style the container, example
dividerStyle (object default: {}
)
An object to style the divider, example
onStart (function default: () => {}
)
A callback being fire when the divider starts moving
onFinish (function default: () => {}
)
A callback being fire when on mouse up event from the divider
onChange: (function default: ({ratio, containerWidth, leftWidth, rightWisth) => {}
)
A callback being fire when the divider moves.
dividerWidth (number default: 2
)
Divider width in pixels. For accuracy, indicate the divider width if changed in dividerStyle
Q&A
- What happen if I have conflicted constrains?
split-panel
respects all constrains equally. The user need to make sure that the constrains does not conflict. For example: Here theleftMinWidth
is bigger than theleftMaxWidth
<SplitPanel leftMaxWidth={200} leftMinWidth={300}>
<div>a</div>
<div>b</div>
</SplitPanel>