useEyeDropper

Leverages the EyeDropper API to let users pick colors from their screen.

Usage

Basic usage example to quickly see how the useEyeDropper works.

Your browser does not support the EyeDropper API

"use client";
import { Button } from "@/ui/button";
import { PickColorIcon } from "@/icons/*";
import { Typography } from "@/ui/typography";
import { useEyeDropper } from "@/hooks/use-eye-dropper";

export function UseEyeDropperDemo() {
  const { pickColor, color, supported, error } = useEyeDropper();

  let message: string = "Pick color";
  if (!supported) return "Your browser does not support the EyeDropper API";
  if (error) message = error?.message;
  if (color) message = color;

  return (
    <>
      <Button variant="outline" size="icon" onClick={pickColor} className="relative z-[99]">
        <PickColorIcon color={color} size={20} />
      </Button>
      <Typography prose="p" className="absolute -top-2 left-2 font-bold z-9">{message}</Typography>
      <div
        className="absolute inset-0 flex size-full min-h-full min-w-full items-center justify-center rounded-lg"
        {...{ style: { backgroundColor: color } }}
      />
    </>
  );
}

API References

mdn

The EyeDropper interface represents an instance of an eyedropper tool that can be opened and used by the user to select colors from the screen.

This example shows how to open an eyedropper tool and wait for the user to either select a pixel from the screen, or press Escape to cancel the eyedropper mode.

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

use-eye-dropper.ts