UseEyeDropper

1'use client';
2 
3import { useCallback, useState } from 'react';
4 
5import useEyeDropper from 'use-eye-dropper';
6 
7type UseColorPickerReturn = {
8  color: string;
9  error: Error | null;
10  isSupported: () => boolean;
11  pickColor: () => void;
12};
13 
14export function useColorPicker(): UseColorPickerReturn {
15  const { open, close, isSupported } = useEyeDropper();
16  const [color, setColor] = useState('#fff');
17  const [error, setError] = useState<Error | null>(null);
18 
19  const pickColor = useCallback(() => {
20    const openPicker = async () => {
21      try {
22        const pickedColor = await open();
23        setColor(pickedColor.sRGBHex);
24        setError(null);
25      } catch (e: any) {
26        console.log(e);
27        if (!e.canceled) setError(e);
28      }
29    };
30    openPicker();
31  }, [open]);
32 
33  return {
34    color,
35    error,
36    isSupported,
37    pickColor,
38  };
39}