🎨 Lightweight <ColorPicker /> component for React.
Features
-
🚀 Lightweight.
-
💨 No dependencies.
-
🛡️ Strict.
Installation
npm
npm install react-color-palette
yarn
yarn add react-color-palette
Usage
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/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 />;
};
Benchmarks
Library |
Minified |
Gzipped |
Dependencies |
Tree Shaking |
Type Declarations |
react-color-palette |
|
|
|
|
|
react-colorful |
|
|
|
|
|
react-input-color |
|
|
|
|
|
rc-color-picker |
|
|
|
|
|
react-color |
|
|
|
|
|
Overriding styles
If the default colors don't fit your project, you can always change them.
Example for the Light theme
.rcp-light {
--rcp-background: #ffffff;
--rcp-input-text: #111111;
--rcp-input-border: rgba(0, 0, 0, 0.1);
--rcp-input-label: #717171;
}
Example for the Dark theme
.rcp-dark {
--rcp-background: #181818;
--rcp-input-text: #f3f3f3;
--rcp-input-border: rgba(255, 255, 255, 0.1);
--rcp-input-label: #999999;
}
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.