Custom toast breaks infinite duration
Author: sjk0-9Created Apr 18, 2022Updated May 20, 2026
Labelsbug
For normal loading toasts:
toast.loading('Loading', { id: 'loading' });
await someProcess();
toast.success('Done', { id: 'loading' });It behaves as expected, the toast displays "loading" and the spinner for the duration of someProcess and then "done" is displayed for the default 2 seconds, before disappearing.
If I want to use custom toasts. I've got to manually set duration like so:
toast.custom(<div>Loading</div>, { id: 'loading', duration: Infinity });
await someProcess();
toast.success('Done', { id: 'loading' });And in this case, the "success" toast appears, but doesn't disappear as expected. Even if I manually specify duration in the success toast's options, it still doesn't work. The only workaround I've managed is using toast.dismiss() after calling success like so:
toast.custom(<div>Loading</div>, { id: 'loading', duration: Infinity });
await someProcess();
toast.success('Done', { id: 'loading' });
setTimeout(toast.dismiss('loading'));Not a major deal breaker but not ideal.
Otherwise, loving the library. Thanks for the great work.
Source: timolins/react-hot-toast