jw-color-picker
v0.1.2
Published
A react component for basic color selection.
Downloads
9
Readme
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 />, document.getElementById("root"));