useWindowSize Hook
A custom React Hook to track window size changes with TypeScript support
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;