loading...
Cover image for 🎨 react-colorful — 1,8 KB color picker for React. Fast, dependency-free, customizable, and accessible

🎨 react-colorful — 1,8 KB color picker for React. Fast, dependency-free, customizable, and accessible

omgovich profile image Vlad Shilov ・3 min read

📆 The Story

Several months ago I was searching for an open-source color picker component to use in my React project.

I spent a lot of time looking for a good package and noticed that the most popular React color picker, react-color, is 140 KB (far larger than the entirety of react-dom), is not tree-shakeable, is not accessible, does not support keyboard navigation, pulls in 11 dependencies, and is not as fast as it could be.

Despite this, react-color is super popular and has 1,7 million downloads weekly. One of the largest reasons for this is there were no lighter alternatives aligned with modern requirements.

So we decided to create one. The primary goal was to create a modern color picker component that would be 10+ times lighter than react-color.

Ryan ChristianAlex Taktarov, and I had been working hard since July to create the tiniest and fastest color picker for the React community.

🎉 That's how react-colorful was born!

Demo:
https://omgovich.github.io/react-colorful

Docs:
https://github.com/omgovich/react-colorful

The current version of react-colorful (v4.1) is 18 times lighter than react-color. It's just 1,8 KB!

🗜 How is react-colorful so small and fast?

1. No dependencies

While most of the popular pickers import entire color manipulation libraries that cost more than 10 KB, react-colorful ships only a minimal amount of manually optimized color conversion algorithms.

For example, react-color pulls in 11 dependencies including tinycolor2 that costs 14,4 KB and doesn't support tree-shaking at all.

We have spent a lot of time making react-colorful dependency-free to ensure it is the lightest of the competition. Not to mention that this thoroughly reduces the surface for vulnerability issues to arise.

2. No classes

ES6 classes are good when you need to encapsulate something, but if you want to create a tiny JS library then class declarations will be one of your worst enemies. Current minifiers cannot minify ES6 class fields and member functions because they are not able to track the class when a method is called on an object.

That's why react-colorful is built with functions, functional components, and hooks only.

It's also one of the reasons why our picker is so fast.

3. No polyfills and extra code transforms

We aim to support not only modern browsers but legacy ones as well. So we have Babel configured to make our code compatible even with IE11.

Writing a library using modern language features such as async/await often trades end user experience for source developer experience. While these modern features may be nicer and more terse to write, they often result in much larger statements when transpiled for use in older browsers.

That's why our source code is so humble in terms of modern ECMAScript features. For example, we use Object.assign({}, color, { alpha }) instead of { ...color, alpha }. While yes, the source uses the older and more verbose API, this results in the bundle size being ~150 bytes lighter due to the lack of the polyfill.

4. Manually optimized

We have installed size-limit and tried many, many different things to find the smallest (in terms of bundle size) variation for each part of the library.

It's pretty hard to put into words, so I just share an example with you:

We have a simple function that clamps a value between an upper and lower bound. That's the first version of this function:

export const clamp = (number, min = 0, max = 1) => {
  return Math.min(Math.max(number, min), max);
};

But after a few experiments we have replaced it with:

export const clamp = (number, min = 0, max = 1) => {
  return number > max ? max : number < min ? min : number;
};

Your eyes do not deceive you: we chose the option that is longer. Why? Because the minification makes the second code almost 2 times shorter. See:

Math.min(Math.max(n,i),a)
n>a?a:n<i?i:n

❤️ Thanks for reading

react-colorful cares about size, performance, and accessibility. I hope that the React community shares our values and will find it useful for further projects.

It will help us a lot if you star the repo on GitHub or share the link to this article with your friends 🙏

GitHub logo omgovich / react-colorful

🎨 A tiny color picker component for modern React apps

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

Features

  • Small: Just 1,8 KB (minified and gzipped). Size Limit controls the size.
  • Tree-shakeable: Only the parts you use will be imported into your app's bundle.
  • Fast: Built with hooks and functional components only.
  • Bulletproof: Written in strict TypeScript and covered by 40+ tests.
  • Simple: The interface is straight forward and easy to use.
  • Mobile-friendly: Works well on mobile devices and touch screens.
  • Accessible: Follows the WAI-ARIA guidelines to support users of assistive technologies.
  • No dependencies

Live demos

Install

npm install react-colorful --save

Usage

import { HexColorPicker } from "react-colorful";
import "react-colorful/dist/index.css";
const YourComponent = () => {
  const [color, setColor] = useState("#aabbcc");
  return <HexColorPicker color={color} onChange=

Discussion

pic
Editor guide
Collapse
daviddalbusco profile image
David Dal Busco

Nice Vlad 👍

We are having a discussion about the future of our color Web Component picker and I really like how you managed to put everything in place.

It can be a source of inspiration for our discussion, so, thank you for the share and work!

Collapse
omgovich profile image
Vlad Shilov Author

If you're looking for a web components based solution you should definitely check vanilla-colorful. It has all the benefits of react-colorful. The only thing you need to be aware of is that vanilla-colorful doesn't support IE11 or Edge 12–18.

Collapse
daviddalbusco profile image
David Dal Busco

Not looking for another solution currently and our project, but who knows in the future. Thx for pointing this out and again for the inspiration 👍

Collapse
futureistaken profile image
R Z

I am dreaming about writing code supporting donkey 11

Collapse
griffadev profile image
Collapse
daviddalbusco profile image
David Dal Busco

We also need some more features such as keeping an history of what users selected for colors in our editor and others stuffs, not to mention that we tend to try to be as much agnostic as possible but, that being said, definitely cool stuffs 👍

Thanks for pointing this out, if it is not for this project, it is worth to know what cool libs exist out there for another one 😉

Collapse
calag4n profile image
calag4n

Cool , I'll need it soon !
That's a good initiative and there are still many components that need that update too.

Collapse
omgovich profile image
Vlad Shilov Author

Thanks!
If you know any other "heavy" popular open-source component, let me know. I would be glad to work on a lightweight version of it.

Collapse
futureistaken profile image
Collapse
futureistaken profile image
R Z

Sometimes it's a good solution because the native browser color pickers suck!

Collapse
1412108 profile image
Dung Tran

Great library. I definitely use it someday

Collapse
omgovich profile image
Vlad Shilov Author

Thanks! Glad you like it)