React Dojo

Buscar

Busca conceptos, ejercicios y quizzes

dom

useWindowSize

Rastrea las dimensiones del viewport y se actualiza reactivamente cada vez que el usuario redimensiona la ventana.


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
}
¿Fue útil?
Inicia sesión para dar feedback