reactuals/dist/hooks/useEyeDropper.js

A useful package providing a collection of 50+ React hooks and utilities to simplify React development.

import { useCallback, useState } from "react";
export function useEyeDropper() {
    const [error, setError] = useState(undefined);
    const [pickedColor, setPickedColor] = useState(null);
    const isSupported = useCallback(() => {
        return typeof window !== "undefined" && !!window.EyeDropper;
    }, []);
    const pickColor = useCallback(async () => {
        if (!isSupported()) {
            const error = new Error("EyeDropper API is not supported in this browser.");
            setError(error);
            setPickedColor(null);
            return { result: null, error };
        }
        try {
            const eyeDropper = new window.EyeDropper();
            const result = await eyeDropper.open();
            setPickedColor(result.sRGBHex);
            setError(undefined);
            return { result };
        }
        catch (error) {
            const err = error instanceof Error ? error : new Error(String(error));
            setError(err);
            setPickedColor(null);
            return { result: null, error: err };
        }
    }, [isSupported]);
    const clearError = useCallback(() => setError(undefined), []);
    return {
        pickColor,
        isSupported,
        error,
        clearError,
        pickedColor,
    };
}