react-colorful：2.8KB 的颜色选择器，比 react-color 轻 13 倍

做 React 开发的同学都遇到过这个场景：需要一个颜色选择器，装个 react-color 吧，整个包 30 多 KB。就为了一个取色功能，代价有点大。

最近发现了一个叫 react-colorful 的项目，GitHub 上 3500+ Star，gzip 后只有 2.8KB。

到底有多小

react-colorful 和 react-color 对比，体积差了整整 13 倍。react-colorful 只有 2.8KB，而且零依赖。

它用 hooks 和函数组件构建，没有 class 组件那一套 polyfill，也没有引入大型颜色转换库。颜色转换算法是自己手动优化的，只保留了最必要的那部分。

用起来什么样

安装就一行：

npm install react-colorful

引入使用也很直接：

import { HexColorPicker } from "react-colorful";

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

如果你需要一个输入框来手动输入颜色值，可以用 HexColorInput 组件：

import { HexColorPicker, HexColorInput } from "react-colorful";

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

颜色模型支持

react-colorful 提供了 12 种颜色模型组件。除了 HEX，还支持 RGB、HSL、HSV，每种都有带 alpha 通道和不带的版本。

比如用 RGB 模型：

import { RgbColorPicker } from "react-colorful";

const YourComponent = () => {
  const [color, setColor] = useState({ r: 50, g: 100, b: 150 });
  return <RgbColorPicker color={color} onChange={setColor} />;
};

支持的模型列表：

• HexColorPicker / HexAlphaColorPicker
• RgbColorPicker / RgbaColorPicker
• HslColorPicker / HslaColorPicker
• HsvColorPicker / HsvaColorPicker
• RgbStringColorPicker / RgbaStringColorPicker
• HslStringColorPicker / HslaStringColorPicker
• HsvStringColorPicker / HsvaStringColorPicker

可定制

颜色选择器的样式可以覆盖。写一个自己的样式表，重写默认的 CSS 类名就行。不需要用行内样式或者 CSS-in-JS。

.your-component .react-colorful {
  height: 240px;
}
.your-component .react-colorful__saturation {
  border-radius: 4px 4px 0 0;
}

输入防抖

颜色选择器在拖拽时会频繁触发 onChange。react-colorful 提供了 onChangeEnd 回调，只在鼠标松开或触摸结束时触发。适合用在需要保存到数据库、撤销/重做这类场景。

<HexColorPicker
  color={color}
  onChange={setColor}
  onChangeEnd={(color) => saveToDatabase(color)}
/>

TypeScript 支持

库本身内置了类型定义，不需要额外安装 @types 包。还可以导入对应的颜色类型：

import { HslColorPicker, HslColor } from "react-colorful";
const myHslValue: HslColor = { h: 0, s: 0, l: 0 };

谁在用

Storybook 内置的颜色选择器就是基于它做的。Resume.io 的简历编辑器里也在用。Leva（一个 React GUI 面板）、snappify（代码截图工具）等项目也都在用。

总的来说，这是一个小而美的工具。如果你只需要一个颜色选择器，不想为这个功能付出额外性能成本，react-colorful 值得一试。

va（一个 React GUI 面板）、snappify（代码截图工具）等项目也都在用。

总的来说，这是一个小而美的工具。如果你只需要一个颜色选择器，不想为这个功能付出额外性能成本，react-colorful 值得一试。