@anton.bobrov/react-vevet-hooks/lib/esm/hooks/useNonMobileHover.js

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

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);
};
import { useEventListener, } from '@anton.bobrov/react-hooks';
import { useState } from 'react';
import { vevet } from 'vevet';
/**
 * Custom React hook for detecting hover state on non-mobile devices.
 *
 * @example
 * const MyComponent = () => {
 *   const ref = useRef<HTMLDivElement>(null);
 *   const isHovered = useNonMobileHover(ref);
 *
 *   return (
 *     <div ref={ref} style={{ backgroundColor: isHovered ? 'lightblue' : 'white' }}>
 *       Hover over me!
 *     </div>
 *   );
 * };
 */
export function useNonMobileHover(ref, props) {
    var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
    useEventListener(__assign({ ref: ref, target: 'mouseenter', listener: function () { return setIsHovered(true); }, getIsDisabled: function () { return vevet.isMobile; } }, props));
    useEventListener(__assign({ ref: ref, target: 'mouseleave', listener: function () { return setIsHovered(false); }, getIsDisabled: function () { return vevet.isMobile; } }, props));
    return isHovered;
}
//# sourceMappingURL=useNonMobileHover.js.map