react-hooks-bank/lib/useHover.js

A collection of **powerful, reusable custom React hooks** for complex, non-trivial interactions that go beyond React’s native features.

import { useRef, useState, useEffect } from "react";
export function useHover() {
    var _a = useState(false), hovered = _a[0], setHovered = _a[1];
    var ref = useRef(null);
    useEffect(function () {
        var node = ref.current;
        if (!node)
            return;
        var handleMouseEnter = function () { return setHovered(true); };
        var handleMouseLeave = function () { return setHovered(false); };
        node.addEventListener("mouseenter", handleMouseEnter);
        node.addEventListener("mouseleave", handleMouseLeave);
        return function () {
            node.removeEventListener("mouseenter", handleMouseEnter);
            node.removeEventListener("mouseleave", handleMouseLeave);
        };
    }, [ref.current]);
    return { ref: ref, hovered: hovered };
}