馃帹 Lightweight Color Picker component for React.
npm install react-color-palettesh
yarn add react-color-palette
`$3
`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
$3
`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 ;
}
`$3
`tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";export function App() {
const [color, setColor] = useColor("cyan");
return ;
}
`$3
`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 (
);
}
`$3
`tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";export function App() {
const [color, setColor] = useColor("#123123");
return
}
`$3
`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
$3
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.
$3
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.
$3
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.
$3
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.
$3
Arg
Type
Default
Description
initialColor
TColor
Initial 褋olor.
$3
Value can be specified using one of the methods listed below:
-
- sRGB color space: hsl(), hwb() or rgb()`| 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.