🎨 Lightweight <ColorPicker /> component for React.
Installation
yarn
yarn add react-color-palette
npm
npm install react-color-palette
Usage
import { 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} />;
}
Examples
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} />;
}
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} />;
}
Custom Layout
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>
);
}
HEX input only
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} />
}
onChangeComplete optional callback
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 <ColorPicker hideInput={["rgb", "hsv"]} color={color} onChange={setColor} onChangeComplete={onChangeComplete} />
}
API
<ColorPicker />
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. |
<Saturation />
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. |
<Hue />
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. |
<Alpha />
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:
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.