Merge pull request #283 from mediamonks/162-allow-resizeobserveroptio…

…ns-when-attaching-element-to-resizeobserver-in-useresizeobserver Set options to observed element in useResizeObserver #162
mediamonks · Dec 5, 2023 · be8568c · be8568c
2 parents c705fdf + dc3de5d
commit be8568c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/src/hooks/useResizeObserver/useResizeObserver.stories.tsx b/src/hooks/useResizeObserver/useResizeObserver.stories.tsx
@@ -35,7 +35,7 @@ export const Demo: Story = {
 
     return (
       <>
-        <h4>Resize the window to update the width of the elements</h4>
+        <h4>Resize the window to update</h4>
         <div ref={elementRef} style={{ outline: '1px solid red', marginBlock: 20 }}>
           Enabled: {enabled.toString()};<br />
           Width: {elementRefWidth};
@@ -57,3 +57,45 @@ export const Demo: Story = {
     );
   },
 };
+
+export const Options: Story = {
+  render() {
+    // Element 1
+    const elementRef1 = useRef<HTMLDivElement>(null);
+    const [elementWidth1, setElementWidth1] = useState(Number.NaN);
+
+    const onResizeElement1 = useCallback((entries: Array<ResizeObserverEntry>) => {
+      setElementWidth1(entries.at(0)?.borderBoxSize.at(0)?.inlineSize ?? Number.NaN);
+    }, []);
+
+    useResizeObserver(elementRef1, onResizeElement1, {
+      box: 'border-box',
+    });
+
+    // Element 2
+    const elementRef2 = useRef<HTMLDivElement>(null);
+    const [elementWidth2, setElementWidth2] = useState<number>(Number.NaN);
+
+    const onResizeElement2 = useCallback((entries: Array<ResizeObserverEntry>) => {
+      setElementWidth2(entries.at(0)?.contentBoxSize.at(0)?.inlineSize ?? Number.NaN);
+    }, []);
+
+    useResizeObserver(elementRef2, onResizeElement2, {
+      box: 'content-box',
+    });
+
+    return (
+      <>
+        <h4>Resize the window to update</h4>
+        <div ref={elementRef1} style={{ outline: '1px solid red', marginBlock: 20, padding: 20 }}>
+          <pre>border-box</pre>
+          Width: {elementWidth1};
+        </div>
+        <div ref={elementRef2} style={{ outline: '1px solid red', marginBlock: 20, padding: 20 }}>
+          <pre>content-box</pre>
+          Width: {elementWidth2};
+        </div>
+      </>
+    );
+  },
+};
diff --git a/src/hooks/useResizeObserver/useResizeObserver.ts b/src/hooks/useResizeObserver/useResizeObserver.ts
@@ -7,10 +7,12 @@ import { unref, type Unreffable } from '../../utils/unref/unref.js';
  *
  * @param target - The target to observe
  * @param callback - The callback to fire when the element resizes
+ * @param options - The ResizeObserverOptions for the observed element
  */
 export function useResizeObserver(
   target: Unreffable<Element | null>,
   callback?: ResizeObserverCallback | undefined,
+  options?: ResizeObserverOptions,
 ): void {
   useEffect(() => {
     const element = unref(target);
@@ -20,10 +22,11 @@ export function useResizeObserver(
     }
 
     const resizeObserver = new ResizeObserver(callback);
-    resizeObserver.observe(element);
+    resizeObserver.observe(element, options);
 
     return () => {
       resizeObserver.disconnect();
     };
-  }, [target, callback]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [target, callback, ...Object.values(options ?? {})]);
 }