react-dropper

React Dropper

Pick color from an image in React

Install

npm i react-dropper

# or

yarn add react-dropper

About

Info about the component

Usage

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

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

ReactDOM.render(
	<Dropper
		width={400}
		height={400}
		color="#000000"
		image={MyImage}
		className="react-dropper"
		onChange={(color, sync) => {
			// Based on the event type
			// the color can be updated or not
			// If the event type is click the color is updated
			// If the event type is mousemove or click, the color is the updated color
			// If the event type is mouseleave, the color is the old color (coming from props)

			// The sync flag indicates whether the color has been updated
		}}
  	/>,
	document.getElementById('demo')
);

Props

• Width - width of the canvas area
• Height - height of the canvas area
• Color - the initial color of the canvas
• Image - url of the image asset - JPG or PNG supported and CORS enabled for external resources
• onChange - function which accepts color and sync arguments (explained above)

Demo

Please click here to see the demo.

LICENSE

MIT