useWindowSize

UseWindowSizeExample

src/prod/window/useWindowSize.ts

import React from 'react';



export interface Size {
	width: number,
	height: number
}

export const useWindowSize = () => {
	const [windowSize, setWindowSize] = React.useState<Size>({
		width: 0,
		height: 0,
	});

	React.useEffect(() => {
		function updateSize () {
			setWindowSize({
				width: window.innerWidth,
				height: window.innerHeight,
			});
		}

		window.addEventListener("resize", updateSize);
		updateSize();

		return () => window.removeEventListener("resize", updateSize);
	}, []);

	return [windowSize];
};

dist/prod/window/useWindowSize.js

import React from 'react';
export const useWindowSize = () => {
    const [windowSize, setWindowSize] = React.useState({
        width: 0,
        height: 0,
    });
    React.useEffect(() => {
        function updateSize() {
            setWindowSize({
                width: window.innerWidth,
                height: window.innerHeight,
            });
        }
        window.addEventListener("resize", updateSize);
        updateSize();
        return () => window.removeEventListener("resize", updateSize);
    }, []);
    return [windowSize];
};

src/prod/window/useWindowSize.ts

import React from 'react';



export interface Size {
	width: number,
	height: number
}

export const useWindowSize = () => {
	const [windowSize, setWindowSize] = React.useState<Size>({
		width: 0,
		height: 0,
	});

	React.useEffect(() => {
		function updateSize () {
			setWindowSize({
				width: window.innerWidth,
				height: window.innerHeight,
			});
		}

		window.addEventListener("resize", updateSize);
		updateSize();

		return () => window.removeEventListener("resize", updateSize);
	}, []);

	return [windowSize];
};