React SplitPanel
================
A resizeable weight-based split panel component.

New in Version 2.x
------------------

 - Completely new, robust CSS (and now with nicer kebab-style-class-names).
 - Any number of children are now supported.
 - Automatically resizes all subpanels correctly when the panel is resized.
 - Now tested in Chrome, Firefox, Edge and IE11.
 - Support for the `weights`, `onWeightChange`, `defaultWeights` and `stepSize`
   props (see below).

Usage
-----
### JSX

Basic example (note more props are supported, see below):

    <SplitPanel direction="horizontal" defaultWeights={[70, 30]}>
        <div>
            <p>First component here</p>
        </div>
        <div>
            <p>Second component here</p>
        </div>
    </SplitPanel>

*If you want to maintain the weight sizes separately (i.e., in a Redux store) 
use the `weights` and `onWeightChange` props instead of `defaultWeights`. 
This behaves similarly to the `value`, `onChange` and `defaultValue` props on 
input elements.*

### Props
#### direction
Either "horizontal" (the default) or "vertical". The direction to layout
subpanels.

#### weights
The relative sizes (weights) given to each subpanel.

#### onWeightChange
Called when an attempt is made to change the weights (e.g., the user dragging a
divider). If using `weights` you must handle this otherwise the user will be
unable to resize the panels.

#### defaultWeights
Use if you don't want to manually keep track of the weights. The user will be
able to resize subpanels. N.B. `weights` and `defaultWeights` are mutually
exclusive, you should only use one.

#### stepSize
Force the subpanels to resize in increments of this value. For example, if
you have two subpanels, each displaying monospaced text, you may want to set
this to the width of a single character so that resizing always aligns with
the text columns.

#### minPanelSize
The minimum size of a subpanel.

### Styling
Look at `dist/splitPanel.less`, there are a couple of variables but it's short
so do whatever you want.

**N.B. The styles have changed dramatically from version 1.x.**

Also note that you should ensure the panel is given a suitable size by either
manually setting a width/height in your CSS or using some other mechanism. E.g.,
you may put the panel in a flex box. The main thing to remember is that while
normal block elements will have a predefined size based on their content the
split panel does not; it will simply fill the space given to it by your CSS.

Contributing
------------
Submit a pull request. I'll take a look at your code and if I like it I'll
merge it. If not I'll either ignore you or tell you what to do to make me like
your code.