useHover

useHover is a custom React hook that tracks whether an element is being hovered.

Usage

import { useHover } from "hookify-react";

export default function UseHoverExample() {
  const { ref, isHovered } = useHover<HTMLDivElement>();

  return (
    <div
      ref={ref}
      style={{
        width: "200px",
        height: "100px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: isHovered ? "blue" : "gray",
        color: "white",
        fontSize: "18px",
        borderRadius: "8px",
        transition: "background 0.3s ease",
      }}
    >
      {isHovered ? "Hovered! 🎯" : "Hover over me!"}
    </div>
  );
}

API Reference

Parameters

This hook does not take any parameters. The element type can be supplied as a generic, e.g. useHover<HTMLDivElement>().

Return Value

useHover returns an object with the following properties:

Property	Type	Description
ref	React.MutableRefObject<T | null>	A ref to attach to the element you want to track.
isHovered	boolean	true while the element is hovered, otherwise false.

Behavior

• Attaches mouseenter and mouseleave listeners to the referenced element via useEventListener.
• Sets isHovered to true on mouseenter and false on mouseleave.
• Cleans up listeners automatically when the component unmounts.