Skip to content

Instantly share code, notes, and snippets.

@iurevych

iurevych/react-simple-color-picker-example.js

Created February 8, 2018 16:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iurevych/24bd2c388c7bbefccf4d24a62ca124ad to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iurevych/24bd2c388c7bbefccf4d24a62ca124ad to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. iurevych created this gist Feb 8, 2018.
    69 changes: 69 additions & 0 deletions react-simple-color-picker-example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    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"));