6.2.2 • Published 1 year ago
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.
.rcp-light {
--rcp-background: #ffffff;
--rcp-input-text: #111111;
--rcp-input-border: rgba(0, 0, 0, 0.1);
--rcp-input-label: #717171;
}
.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.