实现超好用的React颜色选择器组件

颜色选择器组件提供一个简洁美观的面板，很方便的选择常用的颜色，具有推荐颜色、最近使用颜色、拾色器、自定义颜色等功能。

一、介绍

• 推荐颜色：默认为红橙黄绿青蓝紫的不同深浅色，支持自定义
• 最近使用：使用localstorage记录最近使用过的颜色
• 拾色器：颜色吸管工具可吸取网页上其他元素的颜色值
• 更多颜色：可以编辑器颜色的透明度，色盘选择颜色、输入颜色值等（使用react-color实现）

在评论区看到有些同学希望看下源码，应大家要求，此颜色选择器组件已经开源，欢迎大家给个star~

• github.com/alanyf/colo…

图例

• 颜色选择器主面板

• 拾色器（颜色吸管工具）

二、使用

安装

npm install -s color-selector-react

使用

import React, { useState } from 'react';
import { ColorSelector } from 'color-selector-react';
import 'color-selector-react/dist/es/index.css'; // 样式

export default () => {
  const [color, setColor] = useState('#fff');
  const [visible, setVisible] = useState(false);
  return (
    <div style={{ position: 'relative', display: 'inline-block', margin: 60, }}>
      <div
        color={color}
        onClick={() => setVisible(!visible)}
        style={{
          width: 20,
          height: 20,
          border: '1px solid #ccc',
          backgroundColor: color,
        }}
      />
      {<ColorSelector
        style={{ position: 'absolute' }}
        color={color}
        visible={visible}
        onChange={({ color }) => setColor(color)}
        onVisibleChange={(v: boolean) => setVisible(v)}
      />}
    </div>
  );
};

三、参数说明

参数名	含义	默认值	备注
color	颜色值	'#000'	-
visible	是否可见	true	-
recommendedColors	自定义推荐颜色	-	-
localStorageKey	自定义key	'color_picker_recent_color'	最近颜色使用的localStorage唯一键值
showPipetteColor	是否显示拾色器	true	-
showMoreColor	是否显示更多颜色	true	-
className	类名	''	-
style	样式对象	{}	-
onChange	监听颜色变化	-	({ color: string; }) => void
onVisibleChange	监听显示变化	-	(visible: boolean) => void