Implementing custom pickers
Hey, first of all this is a superb react component.

While trying to implement a custom picker, I noticed it only seemed to display the 'sketch' picker, so I had a look in the source in the render function I found this:

``` javascript
 var Picker: any;
    if (this.props.type === 'sketch') {
      Picker = Sketch;
    } else if (this.props.type === 'photoshop') {
      Picker = Photoshop;
    } else if (this.props.type === 'chrome') {
      Picker = Chrome;
    } else if (this.props.type === 'swatches') {
      Picker = Swatches;
    } else if (this.props.type === 'slider') {
      Picker = Slider;
    } else if (this.props.type === 'material') {
      Picker = Material;
    } else if (this.props.type === 'compact') {
      Picker = Compact;
    }
```

With nothing to deal with a custom Picker as suggested in the docs
But by adding this, for example, it works just fine:

``` javascript
    var Picker: any;
    if(this.props.custom) {
      Picker = this.props.custom
    } else if (this.props.type === 'sketch') {
    ...
```

Am I missing something here?
Would really love to get this working without having to touch the node module.

For reference here's my custom picker:

``` javascript
import React from 'react'
import ReactCSS, { Component } from 'react-color/node_modules/reactcss'
import { Alpha, Checkboard, EditableInput, Hue, Saturation } from 'react-color/lib/components/common'
import color from 'react-color/lib/helpers/color'

export default class ReactColorPreset extends Component {

    classes() {
        return {
            'default': {
                picker: {
                    width: '200px',
                    padding: '10px 10px 0',
                    boxSizing: 'initial',
                    background: '#fff',
                    borderRadius: '4px',
                    boxShadow: '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)',
                },
                saturation: {
                    width: '100%',
                    paddingBottom: '75%',
                    position: 'relative',
                    overflow: 'hidden',
                },
                Saturation: {
                    radius: '3px',
                    shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
                },
                controls: {
                    display: 'flex',
                },
                sliders: {
                    padding: '4px 0',
                    flex: '1',
                },
                color: {
                    width: '24px',
                    height: '24px',
                    position: 'relative',
                    marginTop: '4px',
                    marginLeft: '4px',
                    borderRadius: '3px',
                },
                activeColor: {
                    Absolute: '0 0 0 0',
                    borderRadius: '2px',
                    background: 'rgba(' + this.props.rgb.r + ', ' + this.props.rgb.g + ', ' + this.props.rgb.b + ', ' + this.props.rgb.a + ')',
                    boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
                    zIndex: '2',
                },
                hue: {
                    position: 'relative',
                    height: '10px',
                    overflow: 'hidden',
                },
                Hue: {
                    radius: '2px',
                    shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
                },
                alpha: {
                    position: 'relative',
                    height: '10px',
                    marginTop: '4px',
                    overflow: 'hidden',
                },
                Alpha: {
                    radius: '2px',
                    shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
                },

                fields: {
                    display: 'flex',
                    paddingTop: '4px',
                },
                single: {
                    flex: '1',
                    paddingLeft: '6px',
                },
                double: {
                    flex: '2',
                },
                Input: {
                    style: {
                        input: {
                            width: '80%',
                            padding: '4px 10% 3px',
                            border: 'none',
                            boxShadow: 'inset 0 0 0 1px #ccc',
                            fontSize: '11px',
                        },
                        label: {
                            display: 'block',
                            textAlign: 'center',
                            fontSize: '11px',
                            color: '#222',
                            paddingTop: '3px',
                            paddingBottom: '4px',
                            textTransform: 'capitalize',
                        },
                    },
                },
            },
        };
    }

    handleChange(data) {
        this.props.onChange(data);
    }

    handleInputChange(data) {
        if (data.hex) {
            color.isValidHex(data.hex) && this.props.onChange(data.hex);
        } else if (data.r || data.g || data.b) {
            this.props.onChange({
                r: data.r || this.props.rgb.r,
                g: data.g || this.props.rgb.g,
                b: data.b || this.props.rgb.b,
                a: this.props.rgb.a,
            });
        } else if (data.a) {
            if (data.a < 0) {
                data.a = 0;
            } else if (data.a > 100) {
                data.a = 100;
            }

            data.a = data.a / 100;
            this.props.onChange({
                h: this.props.hsl.h,
                s: this.props.hsl.s,
                l: this.props.hsl.l,
                a: data.a,
            });
        }
    }

    render() {
        return (
            <div is="picker">
                <div is="saturation">
                    <Saturation is="Saturation" {...this.props} onChange={ ::this.handleChange }/>
                </div>
                <div is="controls" className="flexbox-fix">
                    <div is="sliders">
                        <div is="hue">
                            <Hue is="Hue" {...this.props} onChange={ ::this.handleChange } />
                        </div>
                    </div>
                    <div is="color">
                        <div is="activeColor"/>
                        <Checkboard />
                    </div>
                </div>
                <div is="fields">
                    <div is="fields" className="flexbox-fix">
                        <div is="double">
                            <EditableInput is="Input" label="hex" value={ this.props.hex.replace('#', '') } onChange={ ::this.handleInputChange }/>
                        </div>
                        <div is="single">
                            <EditableInput is="Input" label="r" value={ this.props.rgb.r } onChange={ ::this.handleInputChange } dragLabel="true" dragMax="255"/>
                        </div>
                        <div is="single">
                            <EditableInput is="Input" label="g" value={ this.props.rgb.g } onChange={ ::this.handleInputChange } dragLabel="true" dragMax="255"/>
                        </div>
                        <div is="single">
                            <EditableInput is="Input" label="b" value={ this.props.rgb.b } onChange={ ::this.handleInputChange } dragLabel="true" dragMax="255"/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
```
