yarn add react-color-palettenpm install react-color-paletteimport { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("#561ecb");
return <ColorPicker color={color} onChange={setColor} />;
}Usage rgb() in useColor()
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("rgb(86 30 203)");
return <ColorPicker color={color} onChange={setColor} />;
}Usage <named-color> in useColor()
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("cyan");
return <ColorPicker color={color} onChange={setColor} />;
}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 (
<div className="custom-layout">
<Saturation height={300} color={color} onChange={setColor} />
<Hue color={color} onChange={setColor} />
</div>
);
}import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("#123123");
return <ColorPicker hideInput={["rgb", "hsv"]} color={color} onChange={setColor} />
}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. | |
| onChange | Function | Сallback function will be fired when color changes. |
| Prop | Type | Default | Description |
|---|---|---|---|
| height | number | Height of the saturation element in pixels. | |
| color | IColor | Current color. | |
| onChange | Function | Сallback function will be fired when color changes. |
| Prop | Type | Default | Description |
|---|---|---|---|
| color | IColor | Current color. | |
| onChange | Function | Сallback function will be fired when color changes. |
| Prop | Type | Default | Description |
|---|---|---|---|
| color | IColor | Current color. | |
| onChange | Function | Сallback function will be fired when color changes. |
| Arg | Type | Default | Description |
|---|---|---|---|
| initialColor | TColor | Initial сolor. |
Value can be specified using one of the methods listed below:
<named-color><hex-color>- sRGB color space:
hsl(),hwb()orrgb()
| Field | Type |
|---|---|
| hex | string |
| rgb | IColorRgb |
| hsv | IColorHsv |
| Field | Type |
|---|---|
| r | number |
| g | number |
| b | number |
| a | number |
| Field | Type |
|---|---|
| h | number |
| s | number |
| v | number |
| a | number |
Code released under the MIT license.
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}
