jw-color-picker

A react component for basic color selection.

Install

Methods

Method	Parameters	Description
`setColor`	`r`: integer. Default: `0` `g`: integer. Default: `0` `b`: integer. Default: `0` `a`: 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 ></Demo>, document.getElementById("root"));