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()