React Image Color Picker

The react-image-color-picker is a powerful and versatile eye-dropper React component that enables users to easily select colors from an image. It provides an intuitive and interactive interface for color picking, zooming, and previewing, making it ideal for various use cases such as image editing, color analysis, and design applications.

Art by Kelly Keiko

Table of Contents

• Features
• Demo!
• Install react-image-color-picker
• How to Use
• Props
• Licence

Key Features

• Touch Support: fully compatible with mobile devices through touch gestures.
• Cross-Browser Compatibility: Ensures compatibility with major web browsers, including Chrome, Firefox, Edge and Samsung Internet allowing users to access and use the application across different platforms seamlessly.
  • It DOES NOT relies on browser EyeDropper API!
• Color picking: Enable users to select colors from an image effortlessly.
• Real-time Color Feedback: Display the selected color in real-time for immediate visual feedback.
• Zoom: Provides a zoomed-in preview of a specific area of the image based on user interaction.
• Easy Integration: Seamlessly integrate the component into React applications with minimal setup.
• Customization: Supports customization of zoom level, image source, and more.

Demo!

Try it out!

Install

React Image color Picker requires React 16.0.0 or later.

NPM

npm install react-image-color-picker

Yarn

yarn add react-image-color-picker

Usage

Import the necessary components:

import React from 'react';
import { ImageColorPicker } from 'react-image-color-picker';
import image from '/path/to/image.jpg'

// Other imports...

const App = () => {
  const handleColorPick = (color: string) => {
    console.log('Selected color:', color); // Selected color: rgb(101, 42, 65)
  };

  return (
    <div>
      <h1>Image Color Picker Demo</h1>
      <ImageColorPicker
        onColorPick={handleColorPick}
        imgSrc={image}
        zoom={1}
      />
    </div>
  );
};

export default App;

Result

Props

/**
  * Callback triggered when a color is selected.
  * @param color Color selected
  */
onColorPick: (color: string): void
/**
  * Image that will be rendered inside the component
  */
imgSrc: string
/**
  * Zoom level for the image preview
  * @default 0.5
  */
zoom?: number

✨ Give a Star

You can give a star at: https://github.com/gusttaswe/react-image-color-picker

License

MIT © gusttaswe