feat: Use ResizeObserver to listen to size changes (#299)

Same as TanStack/virtual#360

Author: christiankaindl

package.json

@@ -124,7 +124,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "@reach/observe-rect": "^1.2.0",
     "@types/d3-array": "^3.0.1",
     "@types/d3-scale": "^4.0.1",
     "@types/d3-shape": "^3.0.1",

src/hooks/useRect.ts

@@ -1,4 +1,3 @@
-import observeRect from '@reach/observe-rect'
 import React from 'react'
 
 import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
@@ -39,14 +38,14 @@ export default function useRect(
       return
     }
 
-    const observer = observeRect(element as Element, (newRect: DOMRect) => {
-      setRect(newRect)
+    const observer = new ResizeObserver((entries) => {
+      setRect(entries[0]?.contentRect)
     })
 
-    observer.observe()
+    observer.observe(element as Element)
 
     return () => {
-      observer.unobserve()
+      observer.unobserve(element as Element)
     }
   }, [element, enabled])