cf-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;