Package - react-colorful

react-colorful is a tiny color picker component for modern React apps.

Features

Small: Just 1,5 KB (minified and gzipped). Size Limit controls the size.
Fast: Built with hooks and functional components only.
Simple: The interface is straight forward and easy to use.
Mobile-friendly: Works well on mobile devices and touch screens.
No dependencies

Live demos

Install

npm install react-colorful --save

Usage

import ColorPicker from "react-colorful";
import "react-colorful/dist/index.css";

const YourComponent = () => {
  const [color, setColor] = useState("#aabbcc");
  return <ColorPicker hex={color} onChange={setColor} />;
};

Overriding styles

The easiest way to tweak react-colorful is to create another stylesheet to override the default styles.

.react-colorful {
  height: 250px;
}
.react-colorful__saturation {
  bottom: 30px;
  border-radius: 3px 3px 0 0;
}
.react-colorful__hue {
  height: 30px;
  border-radius: 0 0 3px 3px;
}
.react-colorful__saturation-pointer {
  border-radius: 5px;
}
.react-colorful__hue-pointer {
  border-radius: 2px;
  width: 15px;
  height: inherit;
}

See examples →

Why react-colorful?

Today each dependency drags more dependencies and increases your project’s bundle size uncontrollably. But size is very important for everything that intends to work in a browser.

react-colorful is a simple color picker for those who care about their bundle size and client-side performance. It's fast and lightweight because:

has no dependencies (no risks in terms of vulnerabilities, no unexpected bundle size changes);
built with hooks and functional components only (no classes and polyfills for them);
a lot of things that you probably don't need (like HSL or 8-digit HEX colors support) were stripped out.

To show you the problem that react-colorful is trying to solve, we have performed a simple benchmark (using size-limit) against popular React color picker libraries:

Name	Size (minified)	Size (gzipped)	Dependencies
react-colorful v1.2.1	4 KB	1,5 KB	0
react-color v2.18.1	165 KB	40,6 KB	6
react-input-color v3.0.1	59 KB	19,1 KB	7
rc-color-picker v1.2.6	117 KB	32,4 KB	5

Features

Live demos

Install

Usage

Overriding styles

Why react-colorful?

Roadmap

Current Tags

70 Versions