Pick a color from any image in React
npm install react-dropper






> Pick a color from any image in React
!GitHub stars
!GitHub forks
!GitHub watchers
!GitHub followers
!GitHub code size in bytes
!GitHub repo size
!GitHub language count
!GitHub top language
!GitHub last commit
``sh
npm i react-dropper
yarn add react-dropper
`
This component allows you to pick any color from any image rendered in a React application. See the demo here.
`javascript
import React from 'react';
import { Dropper } from 'react-dropper';
import MyImage from '../images/image.jpg';
ReactDOM.render(
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')
);
`
| 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 colortype`: the type of the event - 'click', 'mousemove', etc. Useful when deciding whether you want to store the color or not.
-
MIT
---
---