3分钟集成10种专业颜色选择器：react-color实战指南

吉昀蓓

851人浏览 · 2025-10-14 06:40:59

吉昀蓓 · 2025-10-14 06:40:59 发布

3分钟集成10种专业颜色选择器：react-color实战指南

【免费下载链接】react-color :art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more 项目地址: https://gitcode.com/gh_mirrors/re/react-color

你还在为项目中的颜色选择功能编写复杂代码吗？还在纠结如何实现Sketch、Photoshop级别的调色体验吗？本文将带你3分钟内从零开始，在React项目中集成10种专业设计工具风格的颜色选择器，让你的应用瞬间拥有专业级调色交互。

读完本文你将学到：

3步快速安装配置react-color
8种预设选择器的使用方法及场景对比
自定义颜色面板的实战技巧
响应式适配与状态管理最佳实践

快速开始：3步集成流程

1. 安装依赖包

通过npm或yarn快速安装react-color核心包：

npm install react-color --save
# 或
yarn add react-color

官方安装文档：docs/02.01-install.md

2. 基础组件引入

在你的React组件中引入所需的颜色选择器类型，这里以最常用的Sketch风格选择器为例：

import { SketchPicker } from 'react-color';

function App() {
  const [color, setColor] = useState({ r: '241', g: '112', b: '19', a: '1' });
  
  const handleChange = (newColor) => {
    setColor(newColor.rgb);
  };

  return (
    <div>
      <SketchPicker color={color} onChange={handleChange} />
    </div>
  );
}

基础示例代码：examples/basic/src/App.js

3. 事件处理与状态绑定

react-color提供两种核心事件回调：

onChange: 颜色变化过程中持续触发
onChangeComplete: 颜色选择完成时触发

完整状态管理示例：examples/basic-with-react-hooks/src/App.js

8大预设选择器全解析

react-color提供8种主流设计工具风格的颜色选择器，满足不同场景需求：

设计工具风格系列

Sketch风格选择器

import { SketchPicker } from 'react-color';

特点：包含HSL/HSB/RGB多种格式输入框，支持透明度调节

Photoshop风格选择器

import { PhotoshopPicker } from 'react-color';

特点：仿PS调色板布局，提供预设色板与历史记录

简约现代系列

Chrome风格选择器

import { ChromePicker } from 'react-color';

特点：紧凑布局，适合嵌入设置面板

Github风格选择器

import { GithubPicker } from 'react-color';

特点：扁平化设计，支持自定义预设颜色组

组件源码目录：src/components/

高级实战技巧

自定义颜色面板

通过Swatches组件创建自定义色板：

import { SwatchesPicker } from 'react-color';

const customColors = [
  '#4D4D4D', '#999999', '#FFFFFF', '#F44E3B',
  '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00'
];

<SwatchesPicker colors={customColors} />

自定义示例代码：examples/custom-picker/src/App.js

响应式适配方案

使用ColorWrap高阶组件实现条件渲染：

import { ColorWrap } from 'react-color/lib/components/common';
import { ChromePicker } from 'react-color/lib/components/chrome';
import { CompactPicker } from 'react-color/lib/components/compact';

const ResponsivePicker = ({ isMobile }) => (
  <ColorWrap>
    {isMobile ? <CompactPicker /> : <ChromePicker />}
  </ColorWrap>
);