@dnanpm/styleguide/build/es/hooks/useDocHeight.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

import { useCallback, useEffect } from 'react';
import useDebounce from './useDebounce.js';

const DEBOUNCE_DELAY = 100;
const useDocHeight = () => {
    const setDocHeight = useCallback(() => {
        document.documentElement.style.setProperty('--vh100', `${window.innerHeight}px`);
    }, []);
    const debounceSetDocHeight = useDebounce(setDocHeight, DEBOUNCE_DELAY);
    useEffect(() => {
        setDocHeight();
        window.addEventListener('resize', debounceSetDocHeight);
        window.addEventListener('orientationchange', debounceSetDocHeight);
        return () => {
            window.removeEventListener('resize', debounceSetDocHeight);
            window.removeEventListener('orientationchange', debounceSetDocHeight);
        };
    }, [debounceSetDocHeight, setDocHeight]);
};

export { useDocHeight as default };