What does react-image-color-picker provide?
It DOES NOT relies on browser EyeDropper API!- Touch Support: fully compatible with mobile devices through touch gestures.
- Cross-Browser Compatibility: Ensures compatibility with major web browsers, including Chrome, Firefox, Safari, Edge, Opera and Samsung Internet allowing users to access and use the application across different platforms seamlessly.
- Color picking: Enable users to select colors from an image effortlessly.
- Real-time Color Feedback: Display the selected color in real-time for immediate visual feedback.
- Zoom: Provides a zoomed-in preview of a specific area of the image based on user interaction.
- Easy Integration: Seamlessly integrate the component into React applications with minimal setup.
- Customization: Supports customization of zoom level, image source, and more.
Installation
react-image-color-picker requires React 16.0.0 or later.NPM
npm install react-image-color-pickerYARN
yarn add react-image-color-pickerUsage
Import the necessary components:
import React from 'react';
import { ImageColorPicker } from 'react-image-color-picker';
import image from '/path/to/image.jpg'
// Other imports...
const App = () => {
const handleColorPick = (color: string) => {
console.log('Selected color:', color); // Selected color: rgb(101, 42, 65)
};
return (
<div>
<h1>Image Color Picker Demo</h1>
<ImageColorPicker
onColorPick={handleColorPick}
imgSrc={image}
zoom={1}
/>
</div>
);
};
export default App;
Try it out!
No color selected!
1
Props
onColorPick: *(color: string) => void
Callback triggered when a color is selected.Default:-
imgSrc: *string
Image that will be rendered inside the componentDefault:-
zoom: number
Zoom level for the image previewDefault:0.5
✨Give a Start!
You can give a star