Merge branch 'main' of https://github.com/timolins/react-hot-toast

site/pages/docs/toast.mdx

@@ -123,6 +123,24 @@ toast.promise(
 );
 ```
 
+#### Using an Async Function
+
+You can also provide a function that returns a promise, which will be called automatically.
+
+```js
+toast.promise(
+  async () => {
+    const { id } = await fetchData1();
+    await fetchData2(id);
+  },
+  {
+    loading: 'Loading',
+    success: 'Got the data',
+    error: 'Error when fetching',
+  }
+);
+```
+
 ## Default durations
 
 Every type has its own duration. You can overwrite them `duration` with the toast options. This can be done per toast options or globally by the [`<Toaster/>`](/docs/toaster).

site/pages/docs/toaster.mdx

@@ -32,7 +32,7 @@ This component will render all toasts. Alternatively you can create own renderer
     // Default options for specific types
     success: {
       duration: 3000,
-      theme: {
+      iconTheme: {
         primary: 'green',
         secondary: 'black',
       },

src/core/toast.ts

@@ -59,31 +59,49 @@ toast.remove = (toastId?: string) =>
   dispatch({ type: ActionType.REMOVE_TOAST, toastId });
 
 toast.promise = <T>(
-  promise: Promise<T>,
+  promise: Promise<T> | (() => Promise<T>),
   msgs: {
     loading: Renderable;
-    success: ValueOrFunction<Renderable, T>;
-    error: ValueOrFunction<Renderable, any>;
+    success?: ValueOrFunction<Renderable, T>;
+    error?: ValueOrFunction<Renderable, any>;
   },
   opts?: DefaultToastOptions
 ) => {
   const id = toast.loading(msgs.loading, { ...opts, ...opts?.loading });
 
+  if (typeof promise === 'function') {
+    promise = promise();
+  }
+
   promise
     .then((p) => {
-      toast.success(resolveValue(msgs.success, p), {
-        id,
-        ...opts,
-        ...opts?.success,
-      });
+      const successMessage = msgs.success
+        ? resolveValue(msgs.success, p)
+        : undefined;
+
+      if (successMessage) {
+        toast.success(successMessage, {
+          id,
+          ...opts,
+          ...opts?.success,
+        });
+      } else {
+        toast.dismiss(id);
+      }
       return p;
     })
     .catch((e) => {
-      toast.error(resolveValue(msgs.error, e), {
-        id,
-        ...opts,
-        ...opts?.error,
-      });
+      const errorMessage = msgs.error ? resolveValue(msgs.error, e) : undefined;
+
+      if (errorMessage) {
+        toast.error(errorMessage, {
+          id,
+          ...opts,
+          ...opts?.error,
+        });
+      } else {
+        toast.dismiss(id);
+      }
     });
 
   return promise;