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

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

一、介绍

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

图例

• 颜色选择器主面板

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

二、使用

安装

npm install -s color-picker-react-component
复制代码

使用

import React, { useState } from 'react';
import ColorPicker from 'color-picker-react-component';

export default () => {
  const [color, setColor] = useState('#fff');
  const [visible, setVisible] = useState(false);
  return (
    <>
      <div
        color={color}
        style={{
          width: 20,
          height: 20,
          border: '1px solid #ccc',
          backgroundColor: color,
        }}
      />
      <ColorPicker
        color={color}
        visible={visible}
        onChange={(color: string) => setColor(color)}
        onVisibleChange={(v: boolean) => setVisible(v)}
      />
    </>
  );
};
复制代码

三、参数说明

参数名	含义	默认值	备注
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

更多

npm包

目前已经发布1.0版本到npm，欢迎大家使用

• 链接：www.npmjs.com/package/col…