react-color-palette

🎨 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

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} />;
}

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.
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.
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.
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.
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:

• <named-color>
• <hex-color>
• 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.

Changelog

7.2.0 (2024-06-27)

Features

• Add onChangeComplete event (#73) (2aa616e)