useEyeDropper

useEyeDropper (스포이드 색상 선택)

useEyeDropper 훅은 EyeDropper API를 다루기 위한 인터페이스를 제공해요. 화면의 아무 픽셀이나 선택해 색상을 얻을 수 있어요.

출처: 문서

본문

useEyeDropper 훅은 화면의 특정 픽셀에서 색상을 선택할 수 있게 해줘요. EyeDropper API로 동작하며, 어떤 브라우저가 이 API를 지원하는지 브라우저 지원을 확인하세요.

import { useState } from 'react';
import { ActionIcon, Group, ColorSwatch, Text } from '@mantine/core';
import { CrosshairIcon } from '@phosphor-icons/react';
import { useEyeDropper } from '@mantine/hooks';

function Demo() {
  const [color, setColor] = useState('');
  const [error, setError] = useState(null);
  const { supported, open } = useEyeDropper();

  const pickColor = async () => {
    try {
      const { sRGBHex } = (await open())!;
      setColor(sRGBHex);
    } catch (e) {
      setError(e as Error);
    }
  };

  if (!supported) {
    return <Text>EyeDropper API is not supported in your browser</Text>;
  }

  return (
    <Group>
      {color ? (
        <Text>Picked color: {color}</Text>
      ) : (
        <Text>Click the button to pick color</Text>
      )}
      {error && <Text>Error: {error?.message}</Text>}
    </Group>
  );
}

정의 (Definition)

interface EyeDropperOpenOptions {
  signal?: AbortSignal;
}

interface EyeDropperOpenReturnType {
  sRGBHex: string;
}

interface UseEyeDropperReturnValue {
  supported: boolean;
  open: (options?: EyeDropperOpenOptions) => Promise<EyeDropperOpenReturnType>;
}

function useEyeDropper(): UseEyeDropperReturnValue;

Exported types

EyeDropperOpenOptions, EyeDropperOpenReturnType, UseEyeDropperReturnValue 타입은 @mantine/hooks 패키지에서 내보내져요.

import type {
  EyeDropperOpenOptions,
  EyeDropperOpenReturnType,
  UseEyeDropperReturnValue,
} from '@mantine/hooks';

더 알아보기 (Learn more)