useEyeDropper

useEyeDropper is a custom hook that opens the eye dropper tool and returns the color value.

#FF0000

EyeDropper API is not supported in this browser.

const { supported, onOpen } = useEyeDropper()
const [color, setColor] = useState("#FF0000")

const onClick = async () => {
  const result = await onOpen()

  if (result) setColor(result.sRGBHex)
}

return (
  <VStack alignItems="flex-start">
    <HStack gap="sm">
      <ColorSwatch color={color} />
      <Text>{color}</Text>
    </HStack>

    <VStack alignItems="flex-start" gap="sm">
      <Button onClick={onClick} disabled={!supported}>
        Pick Color
      </Button>

      <Show when={!supported}>
        <Text fontSize="sm" color="fg.muted">
          EyeDropper API is not supported in this browser.
        </Text>
      </Show>
    </VStack>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Usage

import { useEyeDropper } from "@yamada-ui/react"

import { useEyeDropper } from "@/components/ui"

import { useEyeDropper } from "@workspaces/ui"

const { supported, onOpen } = useEyeDropper()