1.0.1 • Published 2 years ago
Installation
npm
npm install color-picker-react
yarn
yarn add color-picker-react
Usage
import { ColorPicker, useColor } from "color-picker-react";
import "color-picker-react/lib/css/styles.css";
export const App = () => {
const [color, setColor] = useColor("hex", "#121212");
return <ColorPicker width={456} height={228} color={color} onChange={setColor} hideHSV dark />;
};
API
ColorPicker Props
| Name | Type | Default | Description |
|---|
| width | number | | The width of the color picker. |
| height | number | width | The height of the color picker. |
| color | Color | | The current Color. |
| onChange | Function | | A function to update Color. |
| onChangeComplete | Function | undefined | A callback is called every time the user stops changing a color (mouseup event). |
| hideHEX | bool | false | Hide HEX input. |
| hideRGB | bool | false | Hide RGB input. |
| hideHSV | bool | false | Hide HSV input. |
| alpha | bool | false | Enable alpha channel. |
| dark | bool | false | Color theme. |
useColor Arguments
| Name | Type | Default | Description |
|---|
| model | "hex" | "rgb" | "hsv" | | The color model. |
| initColor | string | ColorRGB | ColorHSV | | The initial color in the selected color model. |
toColor Arguments
| Name | Type | Default | Description |
|---|
| model | "hex" | "rgb" | "hsv" | | The color model. |
| color | string | ColorRGB | ColorHSV | | The color in the selected color model. |
Color
| Field | Type |
|---|
| hex | string |
| rgb | ColorRGB |
| hsv | ColorHSV |
ColorRGB
| Field | Type |
|---|
| r | number |
| g | number |
| b | number |
| a | number | undefined |
ColorHSV
| Field | Type |
|---|
| h | number |
| s | number |
| v | number |
| a | number | undefined |
License
Code released under the MIT license.