react使用颜色选择器react-color

前言：在业务场景中如果遇到用颜色配置一些功能的话就会用到颜色拾取器来选择颜色然后进行提交，今天说一个不错的的插件react-color

先贴一下官方的地址
react-color

1. 安装

npm install react-color --save

2. 封装成一个随用随取的组件

import { FC } from 'react';
import reactCSS from 'reactcss';
import { SketchPicker } from 'react-color';
import { useSetState } from 'ahooks';

interface State {
  displayColorPicker: boolean;
  color: string;
}

interface ColorPickerProps {
  onChange?: (value: any) => void;
}

export const ColorPicker: FC<ColorPickerProps> = ({ onChange }) => {
  const [selectColor, setSelectColor] = useSetState<State>({
    displayColorPicker: false,
    color: '#fff',
  });

  const handleClick = () => {
    setSelectColor({ displayColorPicker: !selectColor.displayColorPicker });
  };

  const handleClose = () => {
    setSelectColor({ displayColorPicker: false });
  };

  const handleChange = ({ hex }: any) => {
    setSelectColor({ color: hex });
    onChange && onChange(hex);
  };

  const styles = reactCSS({
    default: {
      color: {
        width: '36px',
        height: '14px',
        borderRadius: '2px',
        background: selectColor.color,
      },
      swatch: {
        padding: '5px',
        background: '#fff',
        borderRadius: '1px',
        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
        display: 'inline-block',
        cursor: 'pointer',
      },
      popover: {
        position: 'absolute',
        zIndex: '2',
      },
      cover: {
        position: 'fixed',
        top: '0px',
        right: '0px',
        bottom: '0px',
        left: '0px',
      },
    },
  });

  return (
    <div>
      <div style={styles.swatch} onClick={handleClick}>
        <div style={styles.color} />
      </div>
      {selectColor.displayColorPicker ? (
        <div style={styles.popover}>
          <div style={styles.cover} onClick={handleClose} />
          <SketchPicker color={selectColor.color} onChange={handleChange} />
        </div>
      ) : null}
    </div>
  );
};

export default ColorPicker;

3. 页面内引入使用

import ColorPicker from '组件存放的路径';

<Modal
  title="单元标签"
  visible={visible}
  maskClosable={false}
  onCancel={onClose}
  okText={ButtonType.Submit}
  cancelText={ButtonType.Cancel}
  onOk={handleSubmit}
>
  <Form layout="vertical" form={form} autoComplete="off">
     <Item name="name" label="标签名称" rules={[{ required: true }]}>
       <Input />
     </Item>
     <Item name="name2" label="标签选色">
       <ColorPicker />
     </Item>
   </Form>
</Modal>

4. 使用案例

   
   image.png

本次分享到此结束，如有问题欢迎指出