V2 Proposal: Color models

[omgovich]

The goal:

Provide the support of HSL, RGB, and HSV input/output formats without affecting the bundle size (which is ~1,47 KB now).

The most popular React color pickers just include a color conversion library (like TinyColor) and use it for detection and conversion. But the cost of this kind of library is 10KB or more.

I would like to make react-colorful modular in order to be able to add more input/output color formats if someone will ask about that. And I want to keep the picker's bundle light — no matter how many color models it supports.

Proposal

Provide different color models using additional imports. Example:

import ColorPicker from "react-colorful";
+ import HEX from "react-colorful/color/hex";

<ColorPicker
- hex={color}
+ color={color}
+ colorModel={HEX}
/>

In this PR I already implemented sources and a build script for 6 different color models:

import HEX from "react-colorful/color/hex"; // "#aabbcc"
import RGB from "react-colorful/color/rgb"; // { r: 0, g: 0, b: 0 }
import HSL from "react-colorful/color/hsl"; // { h: 0, s: 0, l: 0 }
import HSV from "react-colorful/color/hsv"; // { h: 0, s: 0, v: 0 }
import HSL_STRING from "react-colorful/color/hslString"; // "hsl(360, 100%, 100%)"
import RGB_STRING from "react-colorful/color/rgbString"; // "rgb(255, 255, 255)"

Problem

I want to make the library modular, but I don't want to make DX worse.

So it's hard to decide what should be the default state of the bundle:

1. HEX is the default color model and it's included in the bundle (no profits in terms of size, but will work the same way as v1).
2. RGB is the default color model. Almost the same size as HEX.
3. No color model included by default (makes DX worse).
4. HSL is the default color model (less popular then HEX, but makes the bundle lighter).
5. HSV is the default color model (most unpopular, but the bundle a bit lighter than with full HSL).

I'm pretty sure that the most popular color model is HEX, but it's the heaviest one in terms of code size:

• The react-colorful's internal color model is HSV because each value of this color model represents an axis of the color picker UI.
• To convert HEX to HSV and vice versa, we need to have the entire RGB model code which is big.

Here is a benchmark:

Bundle size when a default color model is included by default:

• HEX: 1615 B (includes entire HSV, HEX and RGB models, and also a part of HSL)
• RGB: 1428 B (includes entire HSV and RGB models, and also a part of HSL)
• HSL: 1225 B (includes entire HSV and HSL models)
• HSV: 1185 B(includes entire HSV and a part of HSL model)

Bundle size without any default color model (will crash if a user forgets to import a color model and pass it to colorModel prop):

• No model: 1148 B — Actually it includes HSV (for internal calculations) and part of HSL (to set background colors) anyway, so it’s smaller than HSV just because I dropped one import and removed one default prop statements.

[omgovich]

@molefrog @jeetiss Hey guys, could I ask you to join me here?
I'd like to know what your thinking and welcome your views ❤️

[molefrog]

I would make the default export color mode HEX, even though it's the heaviest one, it looks like the most used one. It's always nice if you can use the library without looking at the docs.

In terms of the color modes API — it looks ok! We can actually go deeper in terms of the DX, providing the following API:

import ColorPicker from "react-colorful/hsv";

<ColorPicker color={hsv} />

[jeetiss]

hi @omgovich
I'm so glad that you mention me, but i didn't have time for review, sorry ❤️