Indicate that promise messages may be functions, fixes #106

site/pages/docs/toast.mdx

@@ -123,6 +123,38 @@ toast.promise(
 );
 ```
 
+#### Advanced (with dismiss button)
+
+If the `success` and `error` properties are functions, the result is passed to the [`toast.success`](/docs/toast#success) and [`toast.error`](/docs/toast#error) methods. That may then _also_ be a function, accepting a `Toast` object and returning your custom content.
+
+```js
+toast.promise(
+  myPromise,
+  {
+    loading: "Loading",
+    success: (data) => (t) =>
+      (
+        <div>
+          <span>Successfully saved ${data.name}</span>
+          <button type="button" onClick={() => toast.dismiss(t.id)}>
+            Custom Dismiss Button!
+          </button>
+        </div>
+      ),
+    error: (err) => `This just happened: ${err.toString()}`,
+  },
+  {
+    style: {
+      minWidth: "250px",
+    },
+    success: {
+      duration: 5000,
+      icon: "🔥",
+    },
+  }
+);
+```
+
 ## 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).

src/core/toast.ts

@@ -6,6 +6,7 @@ import {
   DefaultToastOptions,
   ValueOrFunction,
   resolveValue,
+  ValueFunction,
 } from './types';
 import { genId } from './utils';
 import { dispatch, ActionType } from './store';
@@ -14,6 +15,14 @@ type Message = ValueOrFunction<Renderable, Toast>;
 
 type ToastHandler = (message: Message, options?: ToastOptions) => string;
 
+type PromiseToastMessages<TPromiseValue> = {
+  loading: Message;
+  success: PromiseToastMessageHandler<TPromiseValue>;
+  error: PromiseToastMessageHandler<any>;
+}
+
+type PromiseToastMessageHandler<T> = Renderable | ValueFunction<Message, T>;
+
 const createToast = (
   message: Message,
   type: ToastType = 'blank',
@@ -59,13 +68,9 @@ toast.dismiss = (toastId?: string) => {
 toast.remove = (toastId?: string) =>
   dispatch({ type: ActionType.REMOVE_TOAST, toastId });
 
-toast.promise = <T>(
-  promise: Promise<T>,
-  msgs: {
-    loading: Renderable;
-    success: ValueOrFunction<Renderable, T>;
-    error: ValueOrFunction<Renderable, any>;
-  },
+toast.promise = <TPromiseValue>(
+  promise: Promise<TPromiseValue>,  
+  msgs: PromiseToastMessages<TPromiseValue>,
   opts?: DefaultToastOptions
 ) => {
   const id = toast.loading(msgs.loading, { ...opts, ...opts?.loading });