🎨 Lightweight <ColorPicker /> component for React.
## Installation
### yarn
```sh
yarn add react-color-palette
```
### npm
```sh
npm install react-color-palette
```
## Usage
```tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("#561ecb");
return ;
}
```
## Examples
### Usage `rgb()` in `useColor()`
```tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("rgb(86 30 203)");
return ;
}
```
### Usage `` in `useColor()`
```tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("cyan");
return ;
}
```
### Custom Layout
```tsx
import { Saturation, Hue, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("hsl(120 100% 50% / .5)");
return (
);
}
```
### HEX input only
```tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("#123123");
return
}
```
### onChangeComplete optional callback
```tsx
import { ColorPicker, useColor, type IColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("#123123");
const onChangeComplete = (color: IColor) => localStorage.setItem("color", color.hex);
return
}
```
## API
### ``
The main component, which includes: <Saturation />, <Hue />, <Alpha /> and <Fields /> components for instant use.
If you need a custom layout, then you can use <Saturation />, <Hue /> and <Alpha /> components separately, which are also exported from the library.
| Prop |
Type |
Default |
Description |
| height |
number |
200 |
Height of the Saturation component in pixels. |
| hideAlpha |
boolean |
false |
Hides the Alpha component. |
| hideInput |
(keyof IColor)[] | boolean |
false |
If boolean: hides all inputs if true or displays all inputs if false. If array: hides all inputs listed in the array. |
| color |
IColor |
|
Current color. |
| disabled |
boolean |
false |
Disables interactivity. |
| onChange |
Function |
|
Сallback function will be fired when color changes. |
| onChangeComplete |
Function |
|
Callback function will be fired when the interaction is complete with the color picker. |
### ``
| Prop |
Type |
Default |
Description |
| height |
number |
|
Height of the saturation element in pixels. |
| color |
IColor |
|
Current color. |
| disabled |
boolean |
false |
Disables interactivity. |
| onChange |
Function |
|
Сallback function will be fired when color changes. |
| onChangeComplete |
Function |
|
Callback function will be fired when the interaction is complete with the saturation picker. |
### ``
| Prop |
Type |
Default |
Description |
| color |
IColor |
|
Current color. |
| disabled |
boolean |
false |
Disables interactivity. |
| onChange |
Function |
|
Сallback function will be fired when color changes. |
| onChangeComplete |
Function |
|
Callback function will be fired when the interaction is complete with the hue picker. |
### ``
| Prop |
Type |
Default |
Description |
| color |
IColor |
|
Current color. |
| disabled |
boolean |
false |
Disables interactivity. |
| onChange |
Function |
|
Сallback function will be fired when color changes. |
| onChangeComplete |
Function |
|
Callback function will be fired when the interaction is complete with the alpha picker. |
### `useColor()`
| Arg |
Type |
Default |
Description |
| initialColor |
TColor |
|
Initial сolor. |
### `TColor`
Value can be specified using one of the methods listed below:
- ``
- ``
- sRGB color space: `hsl()`, `hwb()` or `rgb()`
### `IColor`
### `IColorRgb`
| Field |
Type |
| r |
number |
| g |
number |
| b |
number |
| a |
number |
### `IColorHsv`
| Field |
Type |
| h |
number |
| s |
number |
| v |
number |
| a |
number |
## License
Code released under the MIT license.