dom
useWindowSize
Tracks the viewport dimensions and updates reactively whenever the user resizes the window.
useWindowSize.ts
import { useState, useEffect } from "react"
interface WindowSize {
width: number
height: number
}
export function useWindowSize(): WindowSize {
const [size, setSize] = useState<WindowSize>({
width: typeof window !== "undefined" ? window.innerWidth : 0,
height: typeof window !== "undefined" ? window.innerHeight : 0,
})
useEffect(() => {
function handleResize() {
setSize({ width: window.innerWidth, height: window.innerHeight })
}
window.addEventListener("resize", handleResize)
handleResize()
return () => window.removeEventListener("resize", handleResize)
}, [])
return size
}Was this helpful?
Sign in to give feedback
