qol-hooks/dist/esm/useHover.js

A collection of React hooks to improve the quality of life of developers.

import { useState, useRef, useEffect } from "react";
/**
 * Custom hook to track hover state of an element.
 * @returns A tuple containing a ref object and a boolean indicating whether the element is hovered.
 *
 * @example```tsx
 * const Component = () => {
 *    const [hoverRef, isHovered] = useHover();
 *
 *   return (
 *     <div ref={hoverRef}>
 *      {isHovered ? "Hovered" : "Not Hovered"}
 *    </div>
 * )};
 * ```
 */
function useHover() {
    const [isHovered, setIsHovered] = useState(false);
    const ref = useRef(null);
    const handleMouseOver = () => setIsHovered(true);
    const handleMouseOut = () => setIsHovered(false);
    useEffect(() => {
        const node = ref.current;
        if (node) {
            node.addEventListener("mouseover", handleMouseOver);
            node.addEventListener("mouseout", handleMouseOut);
            return () => {
                node.removeEventListener("mouseover", handleMouseOver);
                node.removeEventListener("mouseout", handleMouseOut);
            };
        }
    }, [ref.current]);
    return [ref, isHovered];
}
export default useHover;