@anton.bobrov/react-vevet-hooks/lib/cjs/hooks/useNonMobilePointerHover.js

A collection of custom React hooks designed to seamlessly integrate with the `Vevet` library

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useNonMobilePointerHover = void 0;
var react_hooks_1 = require("@anton.bobrov/react-hooks");
var react_1 = require("react");
var vevet_1 = require("vevet");
/**
 * Custom React hook for detecting pointer hover state on non-mobile devices.
 *
 * @example
 * const MyComponent = () => {
 *   const ref = useRef<HTMLDivElement>(null);
 *   const isHovered = useNonMobilePointerHover(ref);
 *
 *   return (
 *     <div ref={ref} style={{ backgroundColor: isHovered ? 'lightblue' : 'white' }}>
 *       Hover over me!
 *     </div>
 *   );
 * };
 */
function useNonMobilePointerHover(ref, props) {
    var _a = (0, react_1.useState)(false), isHovered = _a[0], setIsHovered = _a[1];
    (0, react_hooks_1.useEventListener)(__assign({ ref: ref, target: 'pointerenter', listener: function () { return setIsHovered(true); }, getIsDisabled: function () { return vevet_1.vevet.isMobile; } }, props));
    (0, react_hooks_1.useEventListener)(__assign({ ref: ref, target: 'pointerleave', listener: function () { return setIsHovered(false); }, getIsDisabled: function () { return vevet_1.vevet.isMobile; } }, props));
    return isHovered;
}
exports.useNonMobilePointerHover = useNonMobilePointerHover;