react-dropper

React Dropper

Pick a color from any image in React

Visitor stats

Code stats

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.

LICENSE

MIT

Connect with me:

                     

Support and sponsor my work: