npm install color-picker-react
yarn add color-picker-react
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 />;
};
| 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. |
| Name |
Type |
Default |
Description |
| model |
"hex" | "rgb" | "hsv"
|
|
The color model. |
| initColor |
string | ColorRGB | ColorHSV
|
|
The initial color in the selected color model. |
| Name |
Type |
Default |
Description |
| model |
"hex" | "rgb" | "hsv"
|
|
The color model. |
| color |
string | ColorRGB | ColorHSV
|
|
The color in the selected color model. |
| Field |
Type |
| hex |
string |
| rgb |
ColorRGB |
| hsv |
ColorHSV |
| Field |
Type |
| r |
number |
| g |
number |
| b |
number |
| a |
number | undefined
|
| Field |
Type |
| h |
number |
| s |
number |
| v |
number |
| a |
number | undefined
|
Code released under the MIT license.
