@etsoo/react/lib/cjs/uses/useWindowSize.js

TypeScript ReactJs UI Independent Framework

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useWindowSize = void 0;
const react_1 = __importDefault(require("react"));
/**
 * Detect window size
 * @returns Window size
 */
const useWindowSize = () => {
    // State
    const [size, setSize] = react_1.default.useState({
        width: 0,
        height: 0
    });
    react_1.default.useEffect(() => {
        let ticking = false;
        let lastSize;
        let requestAnimationFrameSeed = 0;
        const resizeHandler = () => {
            lastSize = {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            };
            if (!ticking) {
                requestAnimationFrameSeed = window.requestAnimationFrame(() => {
                    ticking = false;
                    requestAnimationFrameSeed = 0;
                    if (lastSize.width != size.width || lastSize.height != size.height) {
                        setSize(lastSize);
                    }
                });
                ticking = true;
            }
        };
        window.addEventListener("resize", resizeHandler, {
            passive: true,
            capture: false
        });
        return () => {
            // Cancel animation frame
            if (requestAnimationFrameSeed > 0)
                window.cancelAnimationFrame(requestAnimationFrameSeed);
            // Remove resize event
            window.removeEventListener("resize", resizeHandler);
        };
    }, []);
    // Return
    return size;
};
exports.useWindowSize = useWindowSize;