REACT

useWindowSize Hook

A custom React Hook to track window size changes with TypeScript support

ReactHooksWindowResponsiveLayout

Code

import { useState, useEffect } from 'react';

type WindowSize = {
  width: number;
  height: number;
};

function useWindowSize(): WindowSize {
  const [windowSize, setWindowSize] = useState<WindowSize>({
    width: typeof window !== 'undefined' ? window.innerWidth : 0,
    height: typeof window !== 'undefined' ? window.innerHeight : 0,
  });

  useEffect(() => {
    __TOKEN_19__ (typeof window === 'undefined') return;

    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);
    window.addEventListener('orientationchange', handleResize);

    __TOKEN_23__ () => {
      window.removeEventListener('resize', handleResize);
      window.removeEventListener('orientationchange', handleResize);
    };
  }, []);

  return windowSize;
}

// Usage example
// const { width, height } = useWindowSize();
// const isDesktop = width >= 1024;
// const isPortrait = height > width;