Allow undefined callback in useResizeObserver #170

mediamonks · Dec 1, 2023 · 610c14e · 610c14e
1 parent c7fe9d0
commit 610c14e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 29 deletions.
diff --git a/src/hooks/useResizeObserver/useResizeObserver.stories.tsx b/src/hooks/useResizeObserver/useResizeObserver.stories.tsx
@@ -1,5 +1,7 @@
+/* eslint-disable react/jsx-no-literals, react-hooks/rules-of-hooks */
 import type { Meta, StoryObj } from '@storybook/react';
-import { type ReactElement, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { useToggle } from '../useToggle/useToggle.js';
 import { useResizeObserver } from './useResizeObserver.js';
 
 const meta = {
@@ -10,30 +12,48 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-function DemoComponent(): ReactElement {
-  const elementRef = useRef<HTMLDivElement>(null);
-  const [element, setElement] = useState<HTMLDivElement | null>(null);
-
-  useResizeObserver(elementRef, () => {
-    // eslint-disable-next-line no-console
-    console.log('Element from RefObject resized');
-  });
-
-  useResizeObserver(element, () => {
-    // eslint-disable-next-line no-console
-    console.log('Element from state resized');
-  });
-
-  return (
-    <>
-      <div ref={elementRef}></div>
-      <div ref={setElement}></div>
-    </>
-  );
-}
-
 export const Demo: Story = {
   render() {
-    return <DemoComponent />;
+    const [enabled, onClick] = useToggle(true);
+
+    const elementRef = useRef<HTMLDivElement>(null);
+    const [elementRefWidth, setElementRefWidth] = useState(Number.NaN);
+
+    const [element, setElement] = useState<HTMLDivElement | null>(null);
+    const [elementWidth, setElementWidth] = useState(Number.NaN);
+
+    const onResizeElementRef = useCallback(() => {
+      setElementRefWidth(elementRef.current?.clientWidth ?? Number.NaN);
+    }, []);
+
+    const onResizeElement = useCallback(() => {
+      setElementWidth(element?.clientWidth ?? Number.NaN);
+    }, [element?.clientWidth]);
+
+    useResizeObserver(elementRef, enabled ? onResizeElementRef : undefined);
+    useResizeObserver(element, enabled ? onResizeElement : undefined);
+
+    return (
+      <>
+        <h4>Resize the window to update the width of the elements</h4>
+        <div ref={elementRef} style={{ outline: '1px solid red', marginBlock: 20 }}>
+          Enabled: {enabled.toString()};<br />
+          Width: {elementRefWidth};
+        </div>
+        <div ref={setElement} style={{ outline: '1px solid red', marginBlock: 20 }}>
+          Enabled: {enabled.toString()};<br />
+          Width: {elementWidth};
+        </div>
+        <button
+          type="button"
+          // eslint-disable-next-line react/jsx-no-bind
+          onClick={(): void => {
+            onClick();
+          }}
+        >
+          Toggle enabled
+        </button>
+      </>
+    );
   },
 };
diff --git a/src/hooks/useResizeObserver/useResizeObserver.ts b/src/hooks/useResizeObserver/useResizeObserver.ts
@@ -10,20 +10,20 @@ import { unref, type Unreffable } from '../../utils/unref/unref.js';
  */
 export function useResizeObserver(
   target: Unreffable<Element | null>,
-  callback: ResizeObserverCallback,
+  callback?: ResizeObserverCallback | undefined,
 ): void {
   useEffect(() => {
     const element = unref(target);
 
-    if (element === null) {
+    if (element === null || callback === undefined) {
       return;
     }
 
-    const resizeObserverInstance = new ResizeObserver(callback);
-    resizeObserverInstance.observe(element);
+    const resizeObserver = new ResizeObserver(callback);
+    resizeObserver.observe(element);
 
     return () => {
-      resizeObserverInstance.disconnect();
+      resizeObserver.disconnect();
     };
   }, [target, callback]);
 }