Merge pull request #1 from noahlaux:noahlaux/issue298

[resize-observer] Fixes jaredLunde#298 Provide optional ResizeObserverOptions
noahlaux · Mar 30, 2023 · 35336ea · 35336ea
2 parents 3c813da + 3a51915
commit 35336ea
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/packages/resize-observer/README.md b/packages/resize-observer/README.md
@@ -77,14 +77,16 @@ const App = () => {
 ```ts
 function useResizeObserver<T extends HTMLElement>(
   target: React.RefObject<T> | T | null,
-  callback: UseResizeObserverCallback
+  callback: UseResizeObserverCallback,
+  options?: ResizeObserverOptions
 ): ResizeObserver
 ```
 
 | Argument | Type                                                      | Required? | Description                                                               |
 | -------- | --------------------------------------------------------- | --------- | ------------------------------------------------------------------------- |
 | target   | <code>React.RefObject<T> &#124; T &#124; null</code>      | Yes       | A React ref created by `useRef()` or an HTML element                      |
 | callback | [`UseResizeObserverCallback`](#useresizeobservercallback) | Yes       | Invoked with a single `ResizeObserverEntry` any time the `target` resizes |
+| options? | [ResizeObserverOptions][1]                                | No        | Provide options to ResizeObserver                                         |
 
 ## Types
 
@@ -100,3 +102,5 @@ export type UseResizeObserverCallback = (
 ## LICENSE
 
 MIT
+
+[1]: https://w3c.github.io/csswg-drafts/resize-observer/#resize-observer-interface
diff --git a/packages/resize-observer/src/index.tsx b/packages/resize-observer/src/index.tsx
@@ -5,6 +5,7 @@ import {
   ResizeObserver as Polyfill,
   ResizeObserverEntry,
 } from '@juggle/resize-observer'
+import {ResizeObserverOptions} from '@juggle/resize-observer/lib/ResizeObserverOptions'
 import useLayoutEffect from '@react-hook/passive-layout-effect'
 import useLatest from '@react-hook/latest'
 
@@ -20,10 +21,12 @@ const ResizeObserver =
  * @param target A React ref created by `useRef()` or an HTML element
  * @param callback Invoked with a single `ResizeObserverEntry` any time
  *   the `target` resizes
+ * @param [options] Provide options to ResizeObserver
  */
 function useResizeObserver<T extends HTMLElement>(
   target: React.RefObject<T> | T | null,
-  callback: UseResizeObserverCallback
+  callback: UseResizeObserverCallback,
+  options?: ResizeObserverOptions
 ): Polyfill {
   const resizeObserver = getResizeObserver()
   const storedCallback = useLatest(callback)
@@ -38,7 +41,7 @@ function useResizeObserver<T extends HTMLElement>(
       storedCallback.current(entry, observer)
     }
 
-    resizeObserver.subscribe(targetEl as HTMLElement, cb)
+    resizeObserver.subscribe(targetEl as HTMLElement, cb, options)
 
     return () => {
       didUnsubscribe = true
@@ -77,8 +80,12 @@ function createResizeObserver() {
 
   return {
     observer,
-    subscribe(target: HTMLElement, callback: UseResizeObserverCallback) {
-      observer.observe(target)
+    subscribe(
+      target: HTMLElement,
+      callback: UseResizeObserverCallback,
+      options?: ResizeObserverOptions
+    ) {
+      observer.observe(target, options)
       const cbs = callbacks.get(target) ?? []
       cbs.push(callback)
       callbacks.set(target, cbs)

diff --git a/packages/resize-observer/types/index.d.ts b/packages/resize-observer/types/index.d.ts
@@ -3,16 +3,20 @@ import {
   ResizeObserver as Polyfill,
   ResizeObserverEntry,
 } from '@juggle/resize-observer'
+import {ResizeObserverOptions} from '@juggle/resize-observer/lib/ResizeObserverOptions'
+
 /**
  * A React hook that fires a callback whenever ResizeObserver detects a change to its size
  *
  * @param target A React ref created by `useRef()` or an HTML element
  * @param callback Invoked with a single `ResizeObserverEntry` any time
  *   the `target` resizes
+ * @param [options] Provide options to ResizeObserver
  */
 declare function useResizeObserver<T extends HTMLElement>(
   target: React.RefObject<T> | T | null,
-  callback: UseResizeObserverCallback
+  callback: UseResizeObserverCallback,
+  options?: ResizeObserverOptions
 ): Polyfill
 export declare type UseResizeObserverCallback = (
   entry: ResizeObserverEntry,