react项目中实现颜色获取器功能

 

使用

 

1. 安装react color 依赖

 

yarn add react-color @types/react-color

 

项目中没有使用typescript时，不需要@types/react-color

 

2. 按需引入

 

import React from 'react';

 

import { SketchPicker } from 'react-color';

 

function ColorPicker  {

 

  const [color, setColor] = useState（"#333"）;

 

  render（） {

 

    return <SketchPicker 

 

                color={color}

 

                onChangeComplete={ （color:any）=>setColor（color.hex） }

 

           />;

 

  }

 

}

 

除了SketchPicker，还有Chrome Photoshop Block Github Twitter Hue Alpha Circle Slider Compact Material Swatches几种，可以根据需要引入相应组件。

 

API

 

1. color

 

颜色选择器颜色选中值，即可接收hex'#333'，也可以接受rgb{ r: 51, g: 51, b: 51, a: 1 }，也可以接受hsl{ h: 0, s: 0, l: .10, a: 1 }

 

2. onChange

 

每次颜色改变都会触发该方法，返回color对象color:{hex: '#333', rgb: {r: 51, g: 51, b: 51, a: 1 },hsl:{ h: 0, s: 0, l: .10, a: 1 }

 

3. onChangeComplete

 

颜色选择完成后触发该方法，与onChange类似，我理解是onChange的优化，onChange触发相对频繁，如果仅是获取选中的颜色，使用onChangeComplete即可。