react-simple-color-picker-example.js

require("./app.scss");

import React from "react";
import ReactDOM from "react-dom";
import createReactClass from "create-react-class";
import ColorPicker from "../../src/";
import ColorSwatch from "./ColorSwatch";
import colors from "./colors.json";


const App = createReactClass({

  getInitialState() {
    return {
      colors : colors,
      selected : 0,
      color: '#fff',
      visible: false
    };
  },

  componentDidMount() {
    window.addEventListener('keyup', this.toggle)
  },

  render() {
    const selectedColor = this.state.colors[this.state.selected];
    const color = this.state.color;

    return (
      <div>
        <button onClick={this.toggle}>Toggle</button>
        <div className="picker picker-left">
          <ColorSwatch
            colors={this.state.colors}
            selected={this.state.selected}
            onSelect={this.handleColorSelect}
          />
        </div>
        <div className="picker picker-right">
          {this.state.visible &&
            <ColorPicker
              color={color}
              opacitySlider={true}
              onChange={this.handleColorChange}
            />
          }
        </div>
      </div>
    );
  },

  toggle() {
    this.setState({ visible: !this.state.visible });
  },

  handleColorSelect(selected) {
    this.setState({ selected });
  },

  handleColorChange(color) {
    const colors = [...this.state.colors];
    colors[this.state.selected] = color;
    this.setState({ colors, color });
  }

});

ReactDOM.render(<App />, document.querySelector("#app"));