@mshafiqyajid/react-color

v0.1.0 ~11 KB 0 deps react

Tiny, modern color picker for React. Zero dependencies, ~11 KB (vs 37 KB). Drop-in replacement for the abandoned react-color package. HexColorPicker, RgbaColorPicker, HslaColorPicker — plus a headless hook and full color-math utilities.

$ npm install @mshafiqyajid/react-color

npm ↗ GitHub ↗

Playground #

#6366F1rgb(99,102,242)

Props

showAlpha

showHexInput

--rcp-width (px)

240

TSX

import { HexColorPicker } from "@mshafiqyajid/react-color/styled";
import "@mshafiqyajid/react-color/styles.css";

<HexColorPicker
  value={color}
  onChange={setColor}
/>

Install #

npm install @mshafiqyajid/react-color

Quick start #

import { HexColorPicker } from "@mshafiqyajid/react-color/styled";
import "@mshafiqyajid/react-color/styles.css";

const [color, setColor] = useState("#6366f1");

<HexColorPicker value={color} onChange={setColor} />

Recipes #

RGBA picker with alpha

import { RgbaColorPicker } from "@mshafiqyajid/react-color/styled";

<RgbaColorPicker
  value={{ r: 99, g: 102, b: 241, a: 0.8 }}
  onChange={setRgba}
  showAlpha
/>

Custom width via CSS variable

<HexColorPicker
  value={color}
  onChange={setColor}
  style={{ "--rcp-width": "320px" } as React.CSSProperties}
/>

Color math utilities

import { parseHex, hsvaToHex, toHsva } from "@mshafiqyajid/react-color";

const rgba = parseHex("#6366f1cc");
// => { r: 99, g: 102, b: 241, a: 0.8 }

const hex = hsvaToHex({ h: 239, s: 84, v: 67, a: 1 });
// => "#6366f1"

API #

Picker components

Component	Output type	Example value
HexColorPicker	string	"#6366f1"
RgbaColorPicker	{ r, g, b, a }	{ r:99, g:102, b:241, a:1 }
HslaColorPicker	{ h, s, l, a }	{ h:239, s:84, l:67, a:1 }

Shared props (all pickers)

Prop	Type	Default	Description
value	format-specific	—	Controlled color value.
defaultValue	format-specific	white	Uncontrolled initial.
onChange	(color) => void	—	Fires on every pointer move.
showAlpha	boolean	false	Add alpha slider.
showHexInput	boolean	true	Show hex text input.

Edit this page on GitHub