React Color颜色选择器

React Color

react框架下的一种颜色选择器，简单！好用！倍棒！！！
react-color介绍官网

1.安装

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

2.使用方法（直接引用就完事了）

先弄好react框架在用哦

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

const ReactColor = () => {
  const [background, setBackGround] = useState('#345') 
  const handleChangeComplete = ({rgb}) =>{
    setBackGround((`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a ?? 1})`))
  }
  return (
    <>
      <div className='displayBlock' style={{ backgroundColor: background }}></div>
      <SketchPicker
        className={'sketchPicker'}
        color={background}
        onChangeComplete={handleChangeComplete}
      />
    </>
  )
}

export default ReactColor

这样一个简单的颜色选择器就完成了，当然其中的SketchPicker 可更改为其他的组件类型，如下：

• ChromePicker
• PhotoshopPicker
• GithubPicker
• BlockPicker
• TwitterPicker
• HuePicker
• AlphaPicker
• CirclePicker
• SliderPicker
• CompactPicker
• MaterialPicker
• SwatchesPicker

组件API（部分）

Api	描述	类型
onChange	颜色修改时会一直调用	function
onChangeComplete	只会在颜色改变的最后一次调用	function
color	可以用来初始化颜色，也可以和父组件的状态保持同步	string
width	选取器的宽度	string
height	选取器的高度	string

还有每个组件特有的api，可以看官网说明（在开头）

结束语

我会写一个demo，写完会放链接在这，感兴趣的可以查看