Allow toast updates and listen to height changes (#75)

* Write initial update logic

* Progress

* Calculate height correctly

* Update

* Update readme

* Revert hero changes

* Fix logic

README.md

@@ -110,6 +110,18 @@ You can pass jsx as the first argument instead of a string to render custom jsx
 toast(<div>A custom toast with default styling</div>);
 ```
 
+### Updating a toast
+
+You can update a toast by using the `toast` function and passing it the id of the toast you want to update, the rest stays the same.
+
+```jsx
+const toastId = toast('Sonner');
+
+toast.success('Toast has been updated', {
+  id: toastId,
+});
+```
+
 ## Customization
 
 ### Headless

src/index.tsx

@@ -111,13 +111,33 @@ const Toast = (props: ToastProps) => {
   }, [heights, heightIndex]);
   const invert = toast.invert || ToasterInvert;
   const disabled = promiseStatus === 'loading';
+
   offset.current = React.useMemo(() => heightIndex * GAP + toastsHeightBefore, [heightIndex, toastsHeightBefore]);
 
   React.useEffect(() => {
     // Trigger enter animation without using CSS animation
     setMounted(true);
   }, []);
 
+  React.useLayoutEffect(() => {
+    if (!mounted) return;
+    const toastNode = toastRef.current;
+    const originalHeight = toastNode.style.height;
+    toastNode.style.height = 'auto';
+    const newHeight = toastNode.getBoundingClientRect().height;
+    toastNode.style.height = originalHeight;
+
+    setInitialHeight(newHeight);
+
+    const alreadyExists = heights.find((height) => height.toastId === toast.id);
+
+    if (!alreadyExists) {
+      setHeights((h) => [{ toastId: toast.id, height: newHeight }, ...h]);
+    } else {
+      setHeights((h) => h.map((height) => (height.toastId === toast.id ? { ...height, height: newHeight } : height)));
+    }
+  }, [toast.title, toast.description]);
+
   React.useEffect(() => {
     if (isPromise(toast)) {
       setPromiseStatus('loading');
@@ -195,6 +215,7 @@ const Toast = (props: ToastProps) => {
 
     if (toastNode) {
       const height = toastNode.getBoundingClientRect().height;
+
       // Add toast height tot heights array after the toast is mounted
       setInitialHeight(height);
       setHeights((h) => [{ toastId: toast.id, height }, ...h]);
@@ -420,7 +441,20 @@ const Toaster = (props: ToasterProps) => {
       // Prevent batching, temp solution.
       setTimeout(() => {
         ReactDOM.flushSync(() => {
-          setToasts((toasts) => [toast, ...toasts]);
+          setToasts((toasts) => {
+            const indexOfExistingToast = toasts.findIndex((t) => t.id === toast.id);
+
+            // Upadte the toast if it already exists
+            if (indexOfExistingToast !== -1) {
+              return [
+                ...toasts.slice(0, indexOfExistingToast),
+                { ...toasts[indexOfExistingToast], ...toast },
+                ...toasts.slice(indexOfExistingToast + 1),
+              ];
+            }
+
+            return [toast, ...toasts];
+          });
         });
       });
     });

src/state.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExternalToast, ToastT, PromiseData, PromiseT, ToastToDismiss } from './types';
+import { ExternalToast, ToastT, PromiseData, PromiseT, ToastToDismiss, ToastTypes } from './types';
 
 let toastsCounter = 0;
 
@@ -27,6 +27,29 @@ class Observer {
     this.toasts = [...this.toasts, data];
   };
 
+  create = (data: ExternalToast & { message?: string | React.ReactNode; type?: ToastTypes }) => {
+    const { message, ...rest } = data;
+    const id = typeof data?.id === 'number' || data.id?.length > 0 ? data.id : toastsCounter++;
+    const alreadyExists = this.toasts.find((toast) => {
+      return toast.id === id;
+    });
+
+    if (alreadyExists) {
+      this.toasts.map((toast) => {
+        if (toast.id === id) {
+          this.publish({ ...toast, ...data, id });
+          return { ...toast, ...data };
+        }
+
+        return toast;
+      });
+    } else {
+      this.publish({ title: message, ...rest, id });
+    }
+
+    return id;
+  };
+
   dismiss = (id?: number | string) => {
     if (!id) {
       this.toasts.forEach((toast) => {
@@ -39,27 +62,19 @@ class Observer {
   };
 
   message = (message: string | React.ReactNode, data?: ExternalToast) => {
-    const id = data?.id || toastsCounter++;
-    this.publish({ ...data, id, title: message });
-    return id;
+    return this.create({ ...data, message });
   };
 
   error = (message: string | React.ReactNode, data?: ExternalToast) => {
-    const id = data?.id || toastsCounter++;
-    this.publish({ ...data, id, type: 'error', title: message });
-    return id;
+    return this.create({ ...data, message, type: 'error' });
   };
 
   success = (message: string | React.ReactNode, data?: ExternalToast) => {
-    const id = data?.id || toastsCounter++;
-    this.publish({ ...data, id, type: 'success', title: message });
-    return id;
+    return this.create({ ...data, type: 'success', message });
   };
 
   promise = (promise: PromiseT, data?: PromiseData) => {
-    const id = data?.id || toastsCounter++;
-    this.publish({ ...data, promise, id });
-    return id;
+    return this.create({ ...data, promise });
   };
 
   // We can't provide the toast we just created as a prop as we didn't creat it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()?