NPM Package

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.

#reactjs#styled-components

Resume

What does react-image-color-picker provide?

It DOES NOT relies on browser EyeDropper API!
  • Touch Support: fully compatible with mobile devices through touch gestures.
  • Cross-Browser Compatibility: Ensures compatibility with major web browsers, including Chrome, Firefox, Safari, Edge, Opera and Samsung Internet allowing users to access and use the application across different platforms seamlessly.
  • 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.

Installation

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;
  

Try it out!

No color selected!
1

Props

onColorPick: *(color: string) => void
Callback triggered when a color is selected.
Default:-
imgSrc: *string
Image that will be rendered inside the component
Default:-
zoom: number
Zoom level for the image preview
Default:0.5

✨Give a Start!

You can give a star

License & Author

Designed & Built by

Gustavo Mata
Changing the world
through technology © 2024