Small And Fast Color Picker Components For React and Preact - react-colorful

Description:

A set of tiny, fast, accessible, mobile-friendly color picker components for React and Preact apps.

How to use it:

1. Install and import the color picker components.

# Yarn
$ yarn add react-colorful
# NPM
$ npm i react-colorful

import {
  HexColorPicker,
  HexAlphaColorPicker,
  RgbColorPicker,
  RgbaColorPicker,
  RgbStringColorPicker,
  RgbaStringColorPicker,
  HslColorPicker,
  HslaColorPicker,
  HslStringColorPicker,
  HslaStringColorPicker,
  HsvColorPicker,
  HsvaColorPicker,
  HsvStringColorPicker,
  HsvaStringColorPicker,
} from "react-colorful";

2. Add the color picker component to the app.

const YourComponent = () => {
  const [color, setColor] = useState("#aabbcc");
  return <HexColorPicker color={color} onChange={setColor} />;
};
const YourComponent = () => {
  const [color, setColor] = useState({ r: 50, g: 100, b: 150 });
  return <RgbColorPicker color={color} onChange={setColor} />;
};
...