JSPM

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

• Website
• CodeSandbox

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: