hooks-belt/dist/hooks/useWindowSize.js

A comprehensive collection of useful React hooks for common use cases

import { useState, useEffect } from 'react';
/**
 * A hook that tracks the window dimensions.
 * Automatically updates when the window is resized.
 *
 * @returns An object with width and height of the window
 *
 * @example
 * ```tsx
 * const { width, height } = useWindowSize()
 *
 * return (
 *   <div>
 *     Window size: {width} x {height}
 *     {width < 768 && <MobileMenu />}
 *   </div>
 * )
 * ```
 */
export function useWindowSize() {
    const [windowSize, setWindowSize] = useState({
        width: typeof window !== 'undefined' ? window.innerWidth : 0,
        height: typeof window !== 'undefined' ? window.innerHeight : 0,
    });
    useEffect(() => {
        if (typeof window === 'undefined') {
            return;
        }
        const handleResize = () => {
            setWindowSize({
                width: window.innerWidth,
                height: 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);
    }, []);
    return windowSize;
}
//# sourceMappingURL=useWindowSize.js.map