useElementSize

1'use client'
2 
3import * as React from 'react'
4 
5export function useElementSize<T extends Element>(
6  ref: React.RefObject<T | null>,
7): { width: number | null, height: number | null }
8export function useElementSize<T extends Element>(
9  ref: React.RefObject<T | null>,
10  initial: {
11    width: number
12    height: number
13  },
14): {
15  width: number
16  height: number
17}
18export function useElementSize<T extends Element = Element>(
19  ref: React.RefObject<T | null>,
20  initial?: {
21    width: number
22    height: number
23  },
24) {
25  const [size, setSize] = React.useState({
26    width: initial?.width ?? null,
27    height: initial?.height ?? null,
28  })
29 
30  const previousObserver = React.useRef<ResizeObserver | null>(null)
31 
32  React.useEffect(() => {
33    const element = ref.current
34 
35    if (previousObserver.current) {
36      previousObserver.current.disconnect()
37      previousObserver.current = null
38    }
39 
40    let observer: ResizeObserver | null = null
41 
42    if (element?.nodeType === Node.ELEMENT_NODE) {
43      observer = new ResizeObserver(([entry]) => {
44        if (entry && entry.borderBoxSize) {
45          const { inlineSize: width, blockSize: height }
46            = entry.borderBoxSize[0]!
47 
48          setSize(prev => width !== prev.width || height !== prev.height ? { width, height } : prev)
49        }
50      })
51 
52      observer.observe(element, { box: 'border-box' })
53      previousObserver.current = observer
54    }
55 
56    return () => {
57      if (previousObserver.current) {
58        previousObserver.current.disconnect()
59        previousObserver.current = null
60      }
61    }
62  }, [ref])
63 
64  return size
65}