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

Same as TanStack/virtual#360
TanStack · Aug 3, 2022 · 0eeeddf · 0eeeddf
1 parent 7a180af
commit 0eeeddf
Show file tree

Hide file tree

Showing 3 changed files with 5,451 additions and 5,468 deletions.
diff --git a/package.json b/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",

diff --git a/src/hooks/useRect.ts b/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])