颜色选择器

选择常用颜色值，具有推荐颜色、最近使用颜色、拾色器、自定义颜色等功能。

图例

安装

npm install -s color-picker-react

使用

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

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 |