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.