Implement the React color picker component

Color picker component provides a simple and beautiful panel, easy to select commonly used colors, with recommended colors, recently used colors, color picker, custom colors and other functions.

Introduce a,

• Recommended color: Red, Orange, yellow, green, blue, purple by default. You can customize the color
• Recently usedUse:localstorageRecord the most recently used colors
• Color picker: The color straw tool draws color values from other elements on the page
• More colors: You can edit the transparency of the color, select the color from the color palette, enter the color value, and so on (use the react-color implementation)

legend

• Color picker main panel

• Color picker (color straw tool)

Second, the use of

The installation

npm install -s color-picker-react-component
Copy the code

use

import React, { useState } from 'react';
import ColorPicker from 'color-picker-react-component';

export default() = > {const [color, setColor] = useState('#fff');
  const [visible, setVisible] = useState(false);
  return (
    <>
      <div
        color={color}
        style={{
          width: 20.height: 20.border: '1px solid #ccc',
          backgroundColor: color,
        }}
      />
      <ColorPicker
        color={color}
        visible={visible}
        onChange={(color: string) = > setColor(color)}
        onVisibleChange={(v: boolean) => setVisible(v)}
      />
    </>
  );
};
Copy the code

3. Parameter Description

More and more

NPM package

Version 1.0 has been released to NPM. Welcome to use it

• Link: www.npmjs.com/package/col…