react-colorpicker

    0.3.14 • Public • Published

    React-ColorPicker

    A simple colorpicker written using React.

    Uses the Colr library: https://github.com/stayradiated/colr

    Installation

    npm install --save react-colorpicker
    

    You will also need to add some css styles.

    See the example stylesheet for ideas.

    Example Usage

    var React = require('react');
    var ColorPicker = require('react-colorpicker');
     
    var colorpicker = new ColorPicker({
        color: '#c0ffee',
        onChange: function (color) {
            // called whenever the color is changed
            console.log(color.hexString());
        }
    });
     
    React.renderComponent(colorpicker, document.body);

    Setting the Color

    Just change the color attribute. Simple.

    var Colr = require('colr');
    var React = require('react');
    var ColorPicker = require('react-colorpicker');
     
    var App = React.createClass({
     
      getInitialState: function () {
        return {
          color: '#000000',
        };
      },
     
      setColor: function () {
        var color = Colr.fromRgb(
          Math.random() * 255, 
          Math.random() * 255, 
          Math.random() * 255
        );
     
        // replace current color and origin color
        this.setState({
          color: color.toHex()
        });
      },
     
      handleChange: function (color) {
        this.setState({
          color: color.toHex()
        });
      },
     
      render: function () {
        /* jshint ignore: start */
        return (
          <div>
            <button onClick={this.setColor}>Load Random Color</button>
            <div>Active: {this.state.color}</div>
     
            <div id='container'>
              <ColorPicker
                color={this.state.color}
                onChange={this.handleChange}
              />
            </div>
          </div>
        );
        /* jshint ignore: end */
      },
     
    });
     
    document.addEventListener('DOMContentLoaded', function () {
      React.renderComponent(new App(), document.body);
    });

    License

    MIT

      Oh noes! Something went wrong.

      Illustration of wombats

      The package file size seems to be too large or the last published date is too old.

      We may support exploring this package in the future. Check back soon.

      Install

      npm i react-colorpicker

      DownloadsWeekly Downloads

      3

      Version

      0.3.14

      License

      MIT

      Last publish

      Collaborators

      • stayradiated