React-split-layout NPM

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:

<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>

Persisting Positions

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.