@react-hookz/web/esm/useWindowSize/useWindowSize.js

React hooks done right, for browser and SSR.

import { useEffect } from 'react';
import { useFirstMountState, useMountEffect, useRafState } from '..';
import { isBrowser } from "../util/const.js";
var listeners = new Set();
var callAllListeners = function () {
    listeners.forEach(function (l) {
        l({
            width: window.innerWidth,
            height: window.innerHeight,
        });
    });
};
/**
 * Tracks window inner dimensions.
 *
 * @param stateHook State hook that will be used internally. Default: `useRafState`.
 * @param measureOnMount Perform size fetch during mount effect stage or synchronously with render.
 */
export function useWindowSize(stateHook, measureOnMount) {
    if (stateHook === void 0) { stateHook = useRafState; }
    var isFirstMount = useFirstMountState();
    var _a = stateHook({
        width: isFirstMount && isBrowser && !measureOnMount ? window.innerWidth : 0,
        height: isFirstMount && isBrowser && !measureOnMount ? window.innerHeight : 0,
    }), size = _a[0], setSize = _a[1];
    useMountEffect(function () {
        if (measureOnMount) {
            setSize({
                width: window.innerWidth,
                height: window.innerHeight,
            });
        }
    });
    useEffect(function () {
        if (listeners.size === 0) {
            window.addEventListener('resize', callAllListeners, { passive: true });
        }
        listeners.add(setSize);
        return function () {
            listeners.delete(setSize);
            if (listeners.size === 0) {
                window.removeEventListener('resize', callAllListeners);
            }
        };
    }, [setSize]);
    return size;
}