useHover
useHover
is a custom hook that detects whether the pointer has moved over or away from an element.
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>
)
If you use this code, you need to add
"use client"
to the top of the file.Usage
import { useHover } from "@yamada-ui/react"
import { useHover } from "@/components/ui"
import { useHover } from "@workspaces/ui"
const { hovered, ref } = useHover()