🎨 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 } ``` ## 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.
onChange	Function		Сallback function will be fired when color changes.

### ``

Prop	Type	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.

### `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`

Field	Type
hex	string
rgb	IColorRgb
hsv	IColorHsv

### `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.

	Stars	Issues	Version	Updated	Created
@mapbox/react-colorpickr	204	1	10.3.0	a year ago	7 years ago
react-color	11,853	216	2.19.3	3 years ago	9 years ago
react-color-palette	231	1	7.1.1	13 days ago	4 years ago
react-input-color	242	10	4.0.1	2 years ago	9 years ago

@mapbox/react-colorpickr vs react-color vs react-color-palette vs react-input-color

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past