Use Dimensions

1import { RefObject, useEffect, useState } from "react"
2 
3interface Dimensions {
4  width: number
5  height: number
6}
7 
8export function useDimensions(
9  ref: RefObject<HTMLElement | SVGElement | null>
10): Dimensions {
11  const [dimensions, setDimensions] = useState<Dimensions>({
12    width: 0,
13    height: 0,
14  })
15 
16  useEffect(() => {
17    const updateDimensions = () => {
18      if (ref.current) {
19        const { width, height } = ref.current.getBoundingClientRect()
20        setDimensions({ width, height })
21      }
22    }
23 
24    updateDimensions()
25    window.addEventListener("resize", updateDimensions)
26 
27    return () => window.removeEventListener("resize", updateDimensions)
28  }, [ref])
29 
30  return dimensions
31}