useEyeDropper
useEyeDropperは、スポイトツールを起動し、色を取得するためのカスタムフックです。
#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>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。使い方
import { useEyeDropper } from "@yamada-ui/react"
import { useEyeDropper } from "@/components/ui"
import { useEyeDropper } from "@workspaces/ui"
const { supported, onOpen } = useEyeDropper()