Travis CI Github Build Codacy Badge Codebeat Badge CodeFactor Badge DeepScan grade Analytics

React Dropper

Pick a color from any image in React

Visitor stats

GitHub stars GitHub forks GitHub watchers GitHub followers

Code stats

GitHub code size in bytes GitHub repo size GitHub language count GitHub top language GitHub last commit


npm i react-dropper

# or

yarn add react-dropper


This component allows you to pick any color from any image rendered in a React application. See the demo here.


import React from 'react';
import { Dropper } from 'react-dropper';

import MyImage from '../images/image.jpg';

    onChange={(color, event) => {
      // The color is the selected color
      // The event is the event type - click, mousemove, etc


Prop Type Required Default Description
image string true '' URL of the image asset (JPG or PNG) -CORS enabled for external assets
width number false 300 Width of the canvas area (in px)
height number false 150 Height of the canvas area (in px)
className string false 'react-dropper' CSS classname for the rendered element
onChange function false (color: string, type: string) => unknown An optional function which accepts two arguments

The onChange function accepts two arguments:

  • color: the selected color
  • type: the type of the event - 'click', 'mousemove', etc. Useful when deciding whether you want to store the color or not.



Connect with me:


Support and sponsor my work:

Send me your message

Trusted by

  • Duke University brand image
  • Emailio brand image
  • E.ON brand image
  • Kinetik Automotive brand image
  • Robert Ladkani brand image
  • SOD 64 brand image
  • Three11 brand image
  • dmarcian brand image
  • htmlBurger brand image
  • htmlBoutique brand image
  • 2create brand image