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