React Dropper

Pick a color from any image in React

Visitor stats

Code stats

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

Install

npm i react-dropper

# or

yarn add react-dropper

Demo

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

Usage

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

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

ReactDOM.render(
  <Dropper
    width={400}
    height={400}
    image={MyImage}
    className="react-dropper"
    onChange={(color, event) => {
      // The color is the selected color
      // The event is the event type - click, mousemove, etc
    }}
  />,
  document.getElementById('demo')
);

Props

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.