react-vh/dist/index.es.js

Save correct vh in root-variable and use it in CSS.

import React from 'react';

function isMobile() {
    var match = window.matchMedia("(pointer:coarse)");
    return match && match.matches;
}

function debounce(callback, delay) {
    var timeout;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(callback, delay);
    };
}

function useVH(_a) {
    var _b = _a === void 0 ? {} : _a, maxWidth = _b.maxWidth;
    React.useEffect(function () {
        function setVH() {
            var innerWidth = window.innerWidth, innerHeight = window.innerHeight, outerHeight = window.outerHeight;
            document.documentElement.style.setProperty("--vh", innerHeight * 0.01 + "px");
            document.documentElement.style.setProperty("--vh-total", outerHeight * 0.01 + "px");
            var width = maxWidth && innerWidth > maxWidth ? maxWidth : innerWidth;
            document.documentElement.style.setProperty("--vw", width * 0.01 + "px");
        }
        var deviceIsMobile = isMobile();
        var dSetVH = debounce(setVH, 150);
        setVH();
        if (deviceIsMobile) {
            window.addEventListener("orientationchange", dSetVH);
        }
        else {
            window.addEventListener("resize", dSetVH);
        }
        return function () {
            if (deviceIsMobile) {
                window.removeEventListener("orientationchange", dSetVH);
            }
            else {
                window.removeEventListener("resize", dSetVH);
            }
        };
    }, [maxWidth]);
}

export default useVH;
export { useVH };
//# sourceMappingURL=index.es.js.map