react-color

react-color is a popular and comprehensive collection of reusable color pickers for React applications. It provides a variety of pre-built, highly customizable color picker components inspired by popular design systems (like Sketch, Chrome, Material UI, Photoshop) and common color selection interfaces. The library aims to simplify the process of adding robust color selection functionality to your React projects, saving developers from the complexity of building color pickers from scratch.

Key features and benefits of react-color:

1. Variety of Pickers: Offers a wide range of picker types, including SketchPicker, ChromePicker, MaterialPicker, PhotoshopPicker, BlockPicker, TwitterPicker, SliderPicker, SwatchesPicker, and more. Each picker comes with its own distinct UI and user experience.
2. Customization: While providing ready-to-use components, react-color also allows for significant customization of styles and behavior to match your application's design.
3. Color Formats: Supports various color formats (HEX, RGB, HSL, HSV), making it versatile for different use cases and easy to integrate with existing color models in your application.
4. Event Handling: Provides `onChange` and `onChangeComplete` event handlers, allowing you to react to real-time color changes or only update your state once the user has finished selecting a color.
5. Performance: Designed with performance in mind, ensuring a smooth user experience even with complex color interactions.
6. Easy Integration: Simple API makes it straightforward to integrate into any React component.

To use react-color, you typically install it via npm or yarn (`npm install react-color` or `yarn add react-color`). Then, you import the desired picker component, manage its state (e.g., the currently selected color) using React's `useState` hook, and render the component within your JSX. The picker will expose a callback function (e.g., `onChangeComplete`) that provides the new color value, which you can then use to update your application's state or UI.

Example Code

import React, { useState } from 'react';
import { SketchPicker } from 'react-color';

function ColorPickerExample() {
  const [backgroundColor, setBackgroundColor] = useState('#fff');
  const [displayColorPicker, setDisplayColorPicker] = useState(false);

  const handleClick = () => {
    setDisplayColorPicker(!displayColorPicker);
  };

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

  const handleChangeComplete = (color) => {
    setBackgroundColor(color.hex);
  };

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

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>React Color Picker Example</h1>
      <p>Click the swatch to open the color picker:</p>

      <div style={styles.swatch} onClick={handleClick}>
        <div style={styles.color} />
      </div>

      {displayColorPicker ? (
        <div style={styles.popover}>
          <div style={styles.cover} onClick={handleClose} />
          <SketchPicker color={backgroundColor} onChangeComplete={handleChangeComplete} />
        </div>
      ) : null}

      <div
        style={{
          marginTop: '20px',
          width: '100%',
          height: '100px',
          backgroundColor: backgroundColor,
          border: '1px solid #ccc',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#fff',
          textShadow: '1px 1px 2px rgba(0,0,0,0.5)',
        }}
      >
        <h2>Selected Color: {backgroundColor}</h2>
      </div>
    </div>
  );
}

export default ColorPickerExample;

Example Code

Related Topics