Use MutationObserver to update on height change

timolins · Jul 17, 2022 · 9eddc26 · 9eddc26
1 parent 59e475c
commit 9eddc26
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 30 deletions.
diff --git a/src/components/toaster.tsx b/src/components/toaster.tsx
@@ -16,16 +16,25 @@ const ToastWrapper = ({
   id,
   className,
   style,
-  onHeightGetter,
+  onHeightUpdate,
   children,
 }: ToastWrapperProps) => {
   const ref = React.useCallback(
     (el: HTMLElement | null) => {
       if (el) {
-        onHeightGetter(id, () => el.getBoundingClientRect().height);
+        const updateHeight = () => {
+          const height = el.getBoundingClientRect().height;
+          onHeightUpdate(id, height);
+        };
+        updateHeight();
+        new MutationObserver(updateHeight).observe(el, {
+          subtree: true,
+          childList: true,
+          characterData: true,
+        });
       }
     },
-    [onHeightGetter]
+    [id, onHeightUpdate]
   );
 
   return (
@@ -113,7 +122,7 @@ export const Toaster: React.FC<ToasterProps> = ({
           <ToastWrapper
             id={t.id}
             key={t.id}
-            onHeightGetter={handlers.setHeightGetter}
+            onHeightUpdate={handlers.updateHeight}
             className={t.visible ? activeClass : ''}
             style={positionStyle}
           >

diff --git a/src/core/types.ts b/src/core/types.ts
@@ -52,7 +52,6 @@ export interface Toast {
   createdAt: number;
   visible: boolean;
   height?: number;
-  getHeight?: () => number;
 }
 
 export type ToastOptions = Partial<
@@ -87,6 +86,6 @@ export interface ToastWrapperProps {
   id: string;
   className?: string;
   style?: React.CSSProperties;
-  onHeightGetter: (id: string, getHeight: () => number) => void;
+  onHeightUpdate: (id: string, height: number) => void;
   children?: React.ReactNode;
 }
diff --git a/src/core/use-toaster.ts b/src/core/use-toaster.ts
@@ -3,14 +3,10 @@ import { dispatch, ActionType, useStore } from './store';
 import { toast } from './toast';
 import { DefaultToastOptions, Toast, ToastPosition } from './types';
 
-// Prevent useLayoutEffect warning from being used on the the server
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-export const setHeightGetter = (toastId: string, getHeight: () => number) => {
+export const updateHeight = (toastId: string, height: number) => {
   dispatch({
     type: ActionType.UPDATE_TOAST,
-    toast: { id: toastId, getHeight },
+    toast: { id: toastId, height },
   });
 };
 const startPause = () => {
@@ -88,27 +84,10 @@ export const useToaster = (toastOptions?: DefaultToastOptions) => {
     [toasts]
   );
 
-  useIsomorphicLayoutEffect(() => {
-    for (const t of toasts) {
-      if (!t.visible || !t.getHeight) {
-        return;
-      }
-
-      const height = t.getHeight();
-
-      if (height !== t.height) {
-        dispatch({
-          type: ActionType.UPDATE_TOAST,
-          toast: { id: t.id, height },
-        });
-      }
-    }
-  }, [toasts]);
-
   return {
     toasts,
     handlers: {
-      setHeightGetter,
+      updateHeight,
       startPause,
       endPause,
       calculateOffset,