Use Eye Dropper - Mantine

import { UseEyeDropperDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.useEyeDropper);

Usage

The use-eye-dropper hook provides an interface to work with EyeDropper API. Check browser support to learn which browsers support the API.

Definition

tsx

interface EyeDropperOpenOptions {
  signal?: AbortSignal;
}

interface EyeDropperOpenReturnType {
  sRGBHex: string;
}

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

function useEyeDropper(): UseEyeDropperReturnValue;

Exported types

EyeDropperOpenOptions, EyeDropperOpenReturnType and UseEyeDropperReturnValue types are exported from the @mantine/hooks package; you can import them in your application:

tsx

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