A React hook that provides real-time window dimensions, handling both SSR compatibility and resize events. It returns the current browser window width and height, updating automatically when the window is resized.
## Key Components
- **useWindowSize**: Main hook export that tracks window dimensions
- **windowSize**: State object containing current `width` and `height`
- **isClient**: SSR safety flag to prevent hydration mismatches
- **handleResize**: Event handler that updates dimensions on window resize
## Usage Example
```typescript
import { useWindowSize } from './use-window-size'
function ResponsiveComponent() {
const { width, height } = useWindowSize()
return (
Window size: {width} × {height}px
{width < 768 ? (
) : (
)}
)
}
// Example: Conditional rendering based on screen size
function Navigation() {
const { width } = useWindowSize()
const isMobile = width < 1024
return isMobile ? :
}
```
The hook automatically handles cleanup of event listeners and provides SSR-safe initial values to prevent hydration errors in Next.js applications.