React Dropper

npm install react-dropper

# or

yarn add react-dropper

import * as React from 'react';
import { Dropper } from 'react-dropper';
import { createRoot } from 'react-dom/client';

import Image from './image.jpg';

const App = () => {
  const [color, setColor] = React.useState('');
  const [event, setEvent] = React.useState('');

  return (
  <div className="app">
    <Dropper
      width={400}
      height={600}
      image={Image}
      onChange={(c, e) => {
        setColor(c);
        setEvent(e);
      }}
    />

    <div className="result">
      <p>The event type is: {event}</p>

      <p>
        The selected color is:
        <span style={{ width: '1rem', height: '1rem', display: 'inline-block', backgroundColor: color }} />
        {color}
      </p>
    </div>
  </>
  );
};

createRoot(document.getElementById('root')!).render(<App />);