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

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

...

Preview:

Download Details:

Author: omgovich

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/omgovich/react-colorful

License: MIT