react-color颜色选择器

介绍

react-color 是一个用于在 React 应用中集成颜色选择器的库。它提供了多种颜色选择器组件，可以轻松地集成到你的 React 项目中，以便用户选择颜色。
点击前往react-color 的github react-color

使用方式

1、安装

npm install react-color --save // 或
cnpm install react-color --save // 或
yarn add react-color --save

2、typescript声明

如果你是使用typescript语言来编写代码，需要对react-color进行额外的声明。
在根目录下的src中，创建一个types的文件夹，在文件夹中，创建
react-color.ts文件，在文件里写下如下代码。

declare module 'react-color';

3、按需引用

react-color里面包含了很多不同的组件，你可以按照自己的需要引入其中一个或一部分即可，不需要将react-color整个引入进项目中

// react-color 目前一共有13种组件:
/** <AlphaPicker /> 
 <BlockPicker /> 
 <ChromePicker/> 
 <CirclePicker /> 
 <CompactPicker /> 
 <GithubPicker /> 
 <HuePicker/> 
 <MaterialPicker />
 <PhotoshopPicker /> 
 <SketchPicker/> 
 <SliderPicker/> 
 <SwatchesPicker/>  
 <TwitterPicker/> */
import { CompactPicker } from 'react-color';

4、使用方式

每一种组件的使用方式基本相同，下面以CompactPicker 为例

组件接收三个参数 color onChange onChangeComplete
color 控制颜色选择器上的当前选中颜色，用来进行初始化颜色，或者用来保持父子组件颜色一致

onChange 修改颜色时触发。每次修改颜色都会传递一个函数来调用。他将被频繁调用。如果你只是想获得最后的选中颜色，使用 onChangeComplete 即可

onChangeComplete 颜色更改完成后触发，这时就可以保持父子组件颜色同步

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

const ColorPicker = () => {
/** 支持16进制颜色和rgb哦 */
// const [color, setColor] = useState('rgb(255,255,255)')
const [color, setColor] = useState('#fff')

/** 
colorObj属性如下
hex: "#ffffff"
hsl: {h: 0, s: 0, l: 1, a: 1}
hsv: {h: 0, s: 0, v: 1, a: 1}
oldHue: 0
rgb: {r: 255, g: 255, b: 255, a: 1}
source: "hex"
*/
const onChangeColor = (colorObj) => {
	setColor(colorObj.hex)
}

/** onChangeCompeleteColor 我测试发现无法触发，可能是这个组件无onChangeComplete，大家可以用其它组件试试看 */
const onChangeCompeleteColor = (colorObj) => {
	console.log(colorObj)
}

return <CompactPicker color={color} onChange={onChangeColor} onChangeComplete={onChangeCompeleteColor } /> 
}

export default ColorPicker;