Feature: configurable dismiss timer duration

[heyfuaad]

The dismiss operation had a hardcoded delay value of 1000 milliseconds which was not configurable. Made some changes to the store.ts file so that a value for the dismiss delay could be passed like so:

toast.custom(
    (t) => (
      // custom jsx here.
    ),
    { dismissDelay: 500 }
);

*Also added the new type to the associated types.ts file.

Closes issue #74
These are non-breaking changes (backward-compatible)

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/timo/react-hot-toast/BxJ7hRyCg1dWRkn95eMrx2hw14pH
✅ Preview: https://react-hot-toast-git-fork-nfuad-main-timo1.vercel.app

[heyfuaad]

Updated the docs too now :)

[efflam]

I use react-hot-toast in headless mode and handle the animation with framer-motion, this option will be really useful to be able to dismiss the toast instantly and let framer-motion remove it with AnimatePresence

[timolins]

Thanks a lot for this PR, @nfuad. Much appreciated. Also thanks to @efflam for clarifying why this is needed.

One thing I'd like to change before merging is renaming the option to removeDelay (as well as the docs).
There is toast.dismiss() which starts the timeout, and toast.remove() which actually removes it. I think it would be more consistent this way, as this option delays the remove, not the dismiss.

Edit: One more thought on the docs: I'd assume that (if you're using headless-mode + framer-motion) you'd want to extend the delay for all toasts, not just one. Maybe showing how to apply to all via the Toaster would be a more fitting example.

[heyfuaad]

Thank you, @efflam for clarifying the use case. In my case though, I just want to show an exit animation that is less than 1 second.
Thank you, @timolins for taking a look. Agreed that removeDelay is a much more fitting name so I've renamed the option now and updated the docs too. Also added an example using the option in the <Toaster /> component in the docs. Let me know if this is good or you want me to make some other changes. :)

[timolins]

Thanks a lot! I'll review the PR shorty.

@nfuad Because you mentioned you need this for shorter animations: The default exit animation is also just 0.4s long. You can preserve the final state of the animation by using animation-fill-mode: forwards;. This way the toast stays invisible and it doesn't need to be remove at an exact time.

[heyfuaad]

@timolins, ah yeah, that would work as well. Thanks for letting me know :)

[DavoCg]

Hello guys, any update on this PR, with our team we have the exact same usecase as @efflam and this PR would be indeed very useful ! Thanks for your work @nfuad and @timolins for this lib we use in every of our projects !

[SunsetUzuki]

It will be merged someday? Why it's still open?

[garmeeh]

This would be a useful addition. The current default makes it feel a little unresponsive for the user.

[irf4nmohd]

@nfuad I'm new to open source. Please can you provide me a setup guide I will like to contribute. When I tried in my local the src is getting bundled and after running sites, it is picking from dist.

[Anirban-Majumder]

is this going to me merged soon? Would be really helpful.

[samepant]

would love to see this PR merged :)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-hot-toast	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 30, 2024 0:49am

[heyfuaad]

@cquanu I'm not sure if I can see why the vercel build is failing - please feel free to take over and merge the PR.

[cquanu]

@nfuad Sorry I'm not the maintainer - won't be able to do this.

[agreen254]

For now, I was able to somewhat do this by calling toast.dismiss() and wrapping toast.remove() in a useTimeout(). This frees up the space behind the toast right when the dismiss animation is completed.

My close button looks like this:

<button
    onClick={() => {
      toast.dismiss(t.id); // this triggers the removal animation
      setTimeout(() => toast.remove(t.id), animationTime); // toast will be removed right when the animation is over
    }}
>
  Close
</button>

Note that this will only work if the animation duration is less than the default of 1 second. Also not sure if this works with AnimatePresence.

[timolins]

Picked this PR up again – thanks, everyone, for their patience. There was a bug where the options weren't respected when they were supplied to the Toaster itself. This was caused by some side effects, which should live outside the store, so I used this PR for a small refactor that I had wanted to do for quite some time.

Merging now!