react-canvas-color-picker

React Canvas Color Picker

Simple, fast, customizable canvas based color picker built in React. Supports HSLA, HSVA color spectrums, and hsla, hsva, rgba, hex, and hex8 color formats.

Install

npm

npm install react-canvas-color-picker

yarn

yarn add react-canvas-color-picker

Basic Usage

import React, { useState, useRef, useCallback } from "react";
import { ColorPicker, ColorFormats } from "react-canvas-color-picker";

export default function App() {
  const [color, setColor] = useState({ r: 255, g: 255, b: 255, a: 1 });
  const formats = useRef<ColorFormats[]>(["rgba"]);

  const handleChange = useCallback(({ colors }) => {
    setColor({ ...colors.rgba });
  }, []);

  return (
    <ColorPicker
      spectrum="hsva"
      formats={formats.current}
      initialColor={color}
      onPanStart={handleChange}
      onPan={handleChange}
    />
  );
}

Props

Prop	Required	Type	Default	Description
initialColor	no	RGBA, HSLA, HSVA, HEX, CSS Color	{ r: 255, g: 255, b: 255, a: 1 }	Color the color picker will mount with
formats	no	ColorFormats[] ex: ["rgba", hsla"]	["rgba"]	Array of color formats sent in callback functions
spectrum	no	"hsva" or "hsla"	hsva	Specify which color spectrum to use
spectrumWidth	no	number	240	Sets width of color box and sliders
spectrumHeight	no	number	240	Sets height of color box
sliderHeight	no	number	14	Sets height of hue and alpha sliders
className	no	string	undefined	Additional classes for parent container
spectrumClasses	no	string	undefined	Additional classes for hsla / hsva spectrum container
hueClasses	no	string	undefined	Additional classes for hue slider container
alphaClasses	no	string	undefined	Additional classes for alpha slider container
handleClasses	no	string	undefined	Additional classes for slider and spectrum handles
hideAlpha	no	boolean	false	Removes the alpha selector
onPanStart	no	(event: colorPickerChangeEvent) => void	undefined	Callback function when pan starts
onPan	no	(event: colorPickerChangeEvent) => void	undefined	Callback function on pan
onPanEnd	no	(event: colorPickerChangeEvent) => void	undefined	Callback function when pan ends

Change Events

onPanStart, onPan, and onPanEnd all return an object containing the colors specified in the formats prop, and the id of the spectrum or slider that was panned with. Note: make sure to wrap handlers in useCallback.

{
  colors: object;
  canvasId: string;
}

setColor

Sometimes you'll want to set the color of the color picker after it's been mounted (imagine changing a hex input, or clicking a color swatch). For this use case there is a setColor method which can be access by passing a ref to the color picker.

import React, { useRef } from "react";
import { ColorPicker, SetColor } from "react-canvas-color-picker";

export default function App() {
  const colorPickerRef = useRef<SetColor>();

  const setRandomColor = () => {
    const newColor = {
      r: Math.random() * 255,
      g: Math.random() * 255,
      b: Math.random() * 255,
      a: 1
    };
    colorPickerRef.current?.setColor(newColor);
  };

  return (
    <>
      <ColorPicker ref={colorPickerRef} />
      <button onClick={setRandomColor}>Random Color</button>
    </>
  );
}

Advanced Example

See: https://codesandbox.io/s/react-canvas-color-picker-q4heh?file=/src/App.tsx:1280-1429