@nydelic/toolbox/dist/hooks/useWindowSize.js

A collection of hooks, components, and other helpful tools.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const useWindowSize = () => {
    // Initialize state with undefined width/height so server and client renders match
    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
    const [windowSize, setWindowSize] = (0, react_1.useState)([-1, -1]);
    (0, react_1.useEffect)(() => {
        // Handler to call on window resize
        const handleResize = () => {
            // Set window width/height to state
            setWindowSize([window.innerWidth, window.innerHeight]);
        };
        // Add event listener
        window.addEventListener("resize", handleResize);
        // Call handler right away so state gets updated with initial window size
        handleResize();
        // Remove event listener on cleanup
        return () => window.removeEventListener("resize", handleResize);
    }, []); // Empty array ensures that effect is only run on mount
    return windowSize;
};
exports.default = useWindowSize;
//# sourceMappingURL=useWindowSize.js.map