文章目录react-colorful2.8KB 的颜色选择器比 react-color 轻 13 倍到底有多小用起来什么样颜色模型支持可定制输入防抖TypeScript 支持谁在用react-colorful2.8KB 的颜色选择器比 react-color 轻 13 倍做 React 开发的同学都遇到过这个场景需要一个颜色选择器装个 react-color 吧整个包 30 多 KB。就为了一个取色功能代价有点大。最近发现了一个叫 react-colorful 的项目GitHub 上 3500 Stargzip 后只有 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 / HexAlphaColorPickerRgbColorPicker / RgbaColorPickerHslColorPicker / HslaColorPickerHsvColorPicker / HsvaColorPickerRgbStringColorPicker / RgbaStringColorPickerHslStringColorPicker / HslaStringColorPickerHsvStringColorPicker / 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 值得一试。
