<main></main>
class ColorPalette extends React.Component {
    render() {
        const colors = [];
        for (let i=-360; i < 360; i++) {
            colors.push(tinycolor(this.props.start).spin(i).toString());
        }
        return (
            colors.map(color => (
                <div style={{
                    width: '100px',
                    height: '100px',
                    background: color,
                    display: 'inline-block',
                    margin: '5px',
                }} />
            ))
        );
    }
}

class ColorSelector extends React.Component {
    constructor(props) {
        super(props);
        this.state = { color: '#000000' };
        this.setColor = this.setColor.bind(this);
    }

    setColor(e) {
        this.setState({ color: e.target.value });
    }

    render() {
        return (
          <div>
              <div>
                <input type="color" value={this.state.color} onChange={this.setColor} />
              </div>
              <ColorPalette start={this.state.color} />
          </div>
        );
    }
}

ReactDOM.render(<ColorSelector/>, document.querySelector('main'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js
  3. https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.js