React Split Layout

A React component that separate two or more views with a draggable divider.

Heavily inspired by react-split-pane by tomkp.

How to Use

For the simplest case, just add two elements under a `SplitLayout:

`html



`

You can have SplitLayout with either vertical or horizontal direction,
with multiple children, possibly nesting another SplitLayout, with constraints
on minimum/maximum sizes:

`html
direction="vertical"
onChange={this.onChange}
initialSizes={[100, 300, 100, null]}
minSizes={[100, 100, 100, 100]}
maxSizes={[null, null, 600, null]}>


World

Foo

direction="horizontal"
initialSizes={[50,null]}
onChange={this.onChange}>

Vertical 1

Vertical 2

`

$3

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.

License

MIT License