jw-color-picker

0.1.2 • Public • Published

jw-color-picker

A react component for basic color selection.

NPM version build status node version npm download

Demo

Install

NPM

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 />, document.getElementById("root"));

Readme

Keywords

Package Sidebar

Install

npm i jw-color-picker

Weekly Downloads

1

Version

0.1.2

License

MIT

Unpacked Size

728 kB

Total Files

30

Last publish

Collaborators

  • johnwong