@kubit-ui-web/react-components/dist/cjs/hooks/useDeviceHeight/useDeviceHeight.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDeviceHeight = void 0;
const react_1 = require("react");
const useDeviceHeight = () => {
    const timeout = (0, react_1.useRef)(null);
    const setVh = () => {
        let vh;
        if (!window.CSS.supports) {
            vh = `${window.innerHeight}px`;
        }
        else {
            const supportSvh = window.CSS.supports('height: 100svh') || window.CSS.supports('max-height: 100svh');
            vh = supportSvh ? '100svh' : `${window.innerHeight}px`;
        }
        document.documentElement.style.setProperty('--100svh', vh);
    };
    const debounceHeight = () => {
        if (timeout.current) {
            clearTimeout(timeout.current);
        }
        timeout.current = setTimeout(() => {
            setVh();
        }, 250);
    };
    (0, react_1.useEffect)(() => {
        setVh();
        window.addEventListener('resize', debounceHeight);
        return () => {
            window.removeEventListener('resize', debounceHeight);
            if (timeout.current) {
                clearTimeout(timeout.current);
            }
        };
    }, []);
};
exports.useDeviceHeight = useDeviceHeight;
//# sourceMappingURL=useDeviceHeight.js.map