maccman · March 3, 2021 02:16 · Mar 3, 2021
diff --git a/use-dimensions.ts b/use-dimensions.ts
@@ -0,0 +1,31 @@
+import { RefObject, useMemo, useLayoutEffect, useRef, useState } from 'react'
+
+type DOMRectRef = [rect: DOMRect, ref: RefObject<HTMLDivElement>]
+
+export const useDimensions = ():DOMRectRef => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  const [rect, setRect] = useState<DOMRect>(DOMRect.fromRect())
+
+  const resizeObserver = useMemo(() => {
+    if ( !ref.current ) return
+
+    const observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        setRect(entry.contentRect)
+      }
+    })
+
+    observer.observe(ref.current)
+
+    return observer
+  }, [ref.current])
+
+  useLayoutEffect(() => () => {
+    if (ref.current) {
+      resizeObserver?.unobserve(ref.current)
+    }
+  }, [resizeObserver, ref.current])
+
+  return [rect, ref]
+}