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