jw-color-picker

A react component for basic color selection.

Demo

Install

Methods

| Method | Parameters | Description | | ---------------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | | setColor | r: integer. Default: 0g: integer. Default: 0b: integer. Default: 0a: integer. Default: 1 | set the color to be selected. | | updateDialogPosition | | re-position the color dialog to be within the view as possible. |

Props

| Prop | Description | | ---------------------------- | ------------------------------------------------------- | | paletteClassName(optional) | the class name for the color palette. Default: `` | | paletteStyle(optional) | the inline style for the color palette. Default: {} | | dialogWidth(optional) | the width of the picker dialog. Default: 200 | | dialogHeight(optional) | the height of the picker dialog. Default: 190 | | color(optional) | the initial color to be selected. Default: random color | | onChange(optional) | the behavior on color change. Default: () => {} |

Usage

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ColorPicker from "jw-color-picker";

class Example extends Component {
  constructor(props) {
    super(props);

    this.state = {
      color: { r: 125, g: 125, b: 125, a: 1 }
    };
  }

  render() {
    const { color } = this.state;
    const { r, g, b, a } = color;

    return (
      <ColorPicker
        id="color-picker"
        color={color}
        onChange={value => this.setState({ color: value })}
      />
    );
  }
}

render(<Demo />, document.getElementById("root"));