This package has been deprecated

Author message:

This package has been deprecated. Please find this package under its new name @cloudflare/component-color-picker.

cf-component-color-picker

A color picker wrapper for react-color

Installation

Installation with yarn is recommended

 
$ yarn add cf-component-color-picker
 

Usage

import React from 'react';
import { ColorPicker, ColorPickerInput } from 'cf-component-color-picker';
import { createComponent } from 'cf-style-container';
 
const ConstrainingDiv = createComponent(
  () => ({
    width: '100px'
  }),
  'div'
);
ConstrainingDiv.setDisplayName('ConstrainingDiv');
 
class ColorPickerExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'green'
    };
 
    this.handleChange = this.handleChange.bind(this);
  }
 
  handleChange(e) {
    this.setState({ color: e.value });
  }
 
  render() {
    return (
      <div>
        <ColorPicker color={'#00BB77'} />
        <br />
        <ConstrainingDiv>
          <ColorPickerInput
            value={this.state.color}
            onChange={this.handleChange}
          />
        </ConstrainingDiv>
      </div>
    );
  }
}
 
export default ColorPickerExample;