@ducor/react/dist/hooks/use-hover.js

admin template ui interface

import { useCallback, useEffect, useRef, useState } from "react";
/**
 * `useHover` is a custom hook that detects whether the pointer has moved over or away from an element.
 *
 * @see Docs https://ui.ducor.net/hooks/use-hover
 */
var useHover = function () {
    var _a = useState(false), hovered = _a[0], setHovered = _a[1];
    var ref = useRef(null);
    var onMouseEnter = useCallback(function () { return setHovered(true); }, []);
    var onMouseLeave = useCallback(function () { return setHovered(false); }, []);
    useEffect(function () {
        var el = ref.current;
        if (el) {
            el.addEventListener("mouseenter", onMouseEnter);
            el.addEventListener("mouseleave", onMouseLeave);
            return function () {
                el.removeEventListener("mouseenter", onMouseEnter);
                el.removeEventListener("mouseleave", onMouseLeave);
            };
        }
    }, [onMouseEnter, onMouseLeave]);
    return { ref: ref, hovered: hovered };
};
export default useHover;