react-color

Color picker for react.

installation

npm install -S @jswork/react-color

properties

| Name | Type | Required | Default | Description | | --------- | ------ | -------- | ------- | ------------------------------------- | | className | string | false | - | The extended className for component. | | value | string | false | - | The changed value. | | onChange | func | false | noop | The change handler. | | items | array | false | [] | The color list. | | template | func | false | - | Render item template. |

usage

1. import css

@import "~@jswork/react-color/dist/style.css";

// or use sass
@import "~@jswork/react-color/dist/style.scss";

// customize your styles:
$react-color-options: ()

2. import js

import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactColor from '@jswork/react-color';
import './assets/style.scss';

class App extends React.Component {
  constructor(inProps) {
    super(inProps);
    this.state = {
      value: '#FCB900',
      items: [
        { value: '#FF6900' },
        { value: '#FCB900' },
        { value: '#7BDCB5' },
        { value: '#00D084' },
        { value: '#8ED1FC' },
        { value: '#0693E3' },
        { value: '#ABB8C3' },
        { value: '#EB144C' },
        { value: '#F78DA7' },
        { value: '#9900EF' }
      ]
    };
  }

  _onChange = (e) => {
    const { value } = e.target;
    console.log('value:', value);
    this.setState({ value });
  };

  render() {
    const { items, value } = this.state;
    return (
      <ReactDemokit
        className="p-3 app-container"
        url="https://github.com/afeiship/react-color">
        <ReactColor items={items} value={value} onChange={this._onChange} />
        <div className="color-show" style={{ background: value }}>
          {value}
        </div>
      </ReactDemokit>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

documentation

• https://afeiship.github.io/react-color/

license

Code released under the MIT license.