mohamediburan / ya-react-eyedropper

An eyedropper component to pick colors from page like chrome eyedropper.

yet Another react-eyedropper (ya-react-eyedropper)

A fully controlled simple react component around eyedropper-polyfill.

Installation:

npm install ya-react-eyedropper --save

Demo

Props:

on: boolean
--enables the eyedropper

onPick: (color: Color) => unknown
-- returns color object. currently only supports hex.

onPickCancel: () => unknown
-- called when eyedropper gets cancelled by clicking esc. similar to native eyedropper of chrome.

Note: Cancel the eyedropper by clicking on keyboard escape button.

Usage

import { useState } from "react";
import { Color, EyeDropper } from "ya-react-eyedropper";

const App = () => {
  const [on, setOn] = useState(false);
  const onPick = (color: Color) => {
    setOn(false);
    console.log({ hex: color.hex });
  };

  const onPickCancel = () => {
    setOn(false);
  };

  return (
    <EyeDropper onPick={onPick} on={on} onPickCancel={onPickCancel}>
      <button onClick={() => setOn(true)}>click me</button>
    </EyeDropper>
  );
};

export default App;

Licence

MIT