diff --git a/packages/resize-observer/README.md b/packages/resize-observer/README.md index 29f7cb02..9f462724 100755 --- a/packages/resize-observer/README.md +++ b/packages/resize-observer/README.md @@ -77,7 +77,8 @@ const App = () => { ```ts function useResizeObserver( target: React.RefObject | T | null, - callback: UseResizeObserverCallback + callback: UseResizeObserverCallback, + options?: ResizeObserverOptions ): ResizeObserver ``` @@ -85,6 +86,7 @@ function useResizeObserver( | -------- | --------------------------------------------------------- | --------- | ------------------------------------------------------------------------- | | target | React.RefObject | T | null | 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 \ No newline at end of file diff --git a/packages/resize-observer/src/index.tsx b/packages/resize-observer/src/index.tsx index 92558279..6d86f105 100644 --- 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( target: React.RefObject | T | null, - callback: UseResizeObserverCallback + callback: UseResizeObserverCallback, + options?: ResizeObserverOptions ): Polyfill { const resizeObserver = getResizeObserver() const storedCallback = useLatest(callback) @@ -38,13 +41,13 @@ function useResizeObserver( storedCallback.current(entry, observer) } - resizeObserver.subscribe(targetEl as HTMLElement, cb) + resizeObserver.subscribe(targetEl as HTMLElement, cb, options) return () => { didUnsubscribe = true resizeObserver.unsubscribe(targetEl as HTMLElement, cb) } - }, [target, resizeObserver, storedCallback]) + }, [target, resizeObserver, storedCallback, options]) return resizeObserver.observer } @@ -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 index e68d54b9..1890c3dc 100644 --- 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( target: React.RefObject | T | null, - callback: UseResizeObserverCallback + callback: UseResizeObserverCallback, + options?: ResizeObserverOptions ): Polyfill export declare type UseResizeObserverCallback = ( entry: ResizeObserverEntry,