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