diff --git a/site/pages/docs/toast.mdx b/site/pages/docs/toast.mdx
index d2dfff1..5c7f42b 100644
--- a/site/pages/docs/toast.mdx
+++ b/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) =>
+ (
+
+ Successfully saved ${data.name}
+
+
+ ),
+ 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 [``](/docs/toaster).
diff --git a/src/core/toast.ts b/src/core/toast.ts
index ec04865..c18e524 100644
--- a/src/core/toast.ts
+++ b/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;
type ToastHandler = (message: Message, options?: ToastOptions) => string;
+type PromiseToastMessages = {
+ loading: Message;
+ success: PromiseToastMessageHandler;
+ error: PromiseToastMessageHandler;
+}
+
+type PromiseToastMessageHandler = Renderable | ValueFunction;
+
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 = (
- promise: Promise,
- msgs: {
- loading: Renderable;
- success: ValueOrFunction;
- error: ValueOrFunction;
- },
+toast.promise = (
+ promise: Promise,
+ msgs: PromiseToastMessages,
opts?: DefaultToastOptions
) => {
const id = toast.loading(msgs.loading, { ...opts, ...opts?.loading });