react-vh/dist/index.js

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(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__default['default'].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]);
}

exports.default = useVH;
exports.useVH = useVH;
//# sourceMappingURL=index.js.map