dom

useResizeObserver

Observa cambios de tamaño en un elemento específico usando ResizeObserver. Devuelve una ref, el ancho y el alto actuales del elemento.

useResizeObserver.ts

import { useState, useEffect, useRef } from "react"

interface Size {
  width: number
  height: number
}

export function useResizeObserver<T extends HTMLElement>() {
  const ref = useRef<T>(null)
  const [size, setSize] = useState<Size>({ width: 0, height: 0 })

  useEffect(() => {
    const el = ref.current
    if (!el) return
    const observer = new ResizeObserver(([entry]) => {
      const { width, height } = entry.contentRect
      setSize({ width, height })
    })
    observer.observe(el)
    return () => observer.disconnect()
  }, [])

  return { ref, width: size.width, height: size.height }
}

¿Fue útil?

Inicia sesión para dar feedback

Buscar

useResizeObserver