useHover
useHoverは、ポインタが要素上に移動したか離れたかを検出するカスタムフックです。
Put mouse over me please
const { hovered, ref } = useHover()
return (
<Box ref={ref} w="full" bg="red.500" p="md" rounded="md" color="white">
{hovered ? "I am hovered" : "Put mouse over me please"}
</Box>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。使い方
import { useHover } from "@yamada-ui/react"
import { useHover } from "@/components/ui"
import { useHover } from "@workspaces/ui"
const { hovered, ref } = useHover()