use-eye-dropper

Pick color from any pixel on the screen
Import
Source
View source code
Docs
Edit this page
Package
@mantine/hooks

Usage

useEyeDropper hook provides an interface to work with EyeDropper API. Note that the API is currently supported on in desktop Chromium based browsers.

EyeDropper API is not supported in your browser
import { useState } from 'react';
import { ActionIcon, Group, ColorSwatch, Text } from '@mantine/core';
import { IconColorPicker } from '@tabler/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);
    }
  };


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


  return (
    <Group>
      <ActionIcon variant="default" onClick={pickColor}>
        <IconColorPicker size="1rem" stroke={1.5} />
      </ActionIcon>
      {color ? (
        <Group spacing="xs">
          <ColorSwatch color={color} />
          <Text>Picked color: {color}</Text>
        </Group>
      ) : (
        <Text>Click the button to pick color</Text>
      )}
      {error && <Text color="red">Error: {error?.message}</Text>}
    </Group>
  );
}

Definition

function useEyeDropper(): {
  supported: boolean;
  open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }>;
};
Go back
use-document-visibility – @mantine/hooks
Up next
use-favicon – @mantine/hooks
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter