split-panel-react
v1.0.6
Published
An easy to use react split panel component with flexible constrains.
Downloads
11
Readme
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>