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

Install

``sh
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

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

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

ReactDOM.render(
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

---

 



 



 



 



 



 



 



 



 



 



 

---

Support and sponsor my work: