Promise Toast with Data Sonner for React

success is a function, (data) => the string with data.name and "has been added". The promise resolves after 2 seconds with { name: "John Doe" }, so the toast becomes "John Doe has been added".

loading is "Creating user...". That line is on screen until the promise resolves, in the same toast. toast.promise then swaps in the string the success function returns.

The string "Failed to create user". This button's promise always resolves, so the toast uses the success line. A rejection would show that error string as written.

A string. This file reads data.name from the resolved object and returns that sentence. The call also omits description.

The promise is Promise<{ name: string }>. The data argument on success is that object, so data.name is a string. The timeout that resolves it is 2 seconds.

Yes. The demo renders its own Toaster beside the button; in an app, render one near the root. The loading state uses Toaster's spinning Loader2Icon until the success line replaces it.