react-color 颜色选择器

casesandberg.github.io/react-color…

演示

安装和使用

npm install react-color --save

基础使用

import React from 'react'
import { SketchPicker } from 'react-color'
 
class Component extends React.Component {
 
  render() {
    return <SketchPicker />
  }
}

also可以 导入AlphaPicker BlockPicker ChromePicker CirclePicker CompactPicker GithubPicker HuePicker MaterialPicker PhotoshopPicker SketchPicker SliderPicker SwatchesPicker TwitterPicker

案例

import React, { useState, useMemo } from 'react';
import reactCSS from 'reactcss';
import { SketchPicker } from 'react-color';
import './index.scss';

const CustomColors = props => {
  const { color, setColor } = props;
  const styles = useMemo(() => {
    return reactCSS({
      default: {
        color: {
          width: '36px',
          height: '14px',
          borderRadius: '2px',
          // background: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`,
          background: 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',
          top: -50,
          right: -261,
          paddingBottom: 60,
        },
        // cover: {
        //   position: 'fixed',
        //   top: '0px',
        //   right: '0px',
        //   bottom: '0px',
        //   left: '0px',
        // },
      },
    });
  }, [color]);
  const [displayColorPicker, setDisplayColorPicker] = useState(false);
  const handleClick = () => {
    setDisplayColorPicker(!displayColorPicker);
  };

  const handleClose = () => {
    setDisplayColorPicker(false);
  };

  const handleChange = color => {
    setColor(
      `rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`
    );
  };
  return (
    <div id="CustomColors">
      <div style={styles.swatch} onClick={handleClick}>
        <div style={styles.color} />
      </div>
      {displayColorPicker ? (
        <div style={styles.popover}>
          <div style={styles.cover} onClick={handleClose} />
          <SketchPicker color={color} onChange={handleChange} />
        </div>
      ) : null}
    </div>
  );
};
export default CustomColors;

#CustomColors {
  position: relative;
  .sketch-picker {
    width: 225px !important;
    .flexbox-fix {
      label {
        text-align: left !important;
        padding-top: 9px !important;
        padding-left: 3px;
        padding-bottom: 13px !important;
      }
    }
    #rc-editable-input-1 {
      width: 87% !important;
    }
  }
}