React Color使用

需求

- 要在react項目中實現顏色獲取器功能

解決方案

- 使用react-color 依賴

- git地址：https://github.com/casesandberg/react-color

- 文檔地址：http://casesandberg.github.io/react-color/#api-onChange

使用

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即可。