A React component that separate two or more views with a draggable divider.
Heavily inspired by react-split-pane by tomkp.
For the simplest case, just add two elements under a SplitLayout:
<SplitLayout direction="vertical">
<div></div>
<div></div>
</SplitLayout>You can have SplitLayout with either vertical or horizontal direction,
with multiple children, possibly nesting another SplitLayout, with constraints
on minimum/maximum sizes:
<SplitLayout
direction="vertical"
onChange={this.onChange}
initialSizes={[100, 300, 100, null]}
minSizes={[100, 100, 100, 100]}
maxSizes={[null, null, 600, null]}>
<div><h1>Hello</h1></div>
<div><h1>World</h1></div>
<div><h1>Foo</h1></div>
<SplitLayout
direction="horizontal"
initialSizes={[50,null]}
onChange={this.onChange}>
<div><h1>Vertical 1</h1></div>
<div><h1>Vertical 2</h1></div>
</SplitLayout>
</SplitLayout>SplitLayout accepts an onChange function prop. You may use it to persists the
changes of sizes and then use them in initialSizes to restore the state.
MIT License
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent