react-hot-toast Feature: configurable dismiss timer duration

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 https://github.com/timolins/react-hot-toast/issues/74 These are non-breaking changes (backward-compatible)

Jun 12 '21 20:06 heyfuaad

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

Jun 12 '21 20:06 vercel[bot]

Updated the docs too now :)

Jun 12 '21 21:06 heyfuaad

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

Jun 14 '21 14:06 efflam

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.

Jun 15 '21 10:06 timolins

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. :)

Jun 15 '21 19:06 heyfuaad

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.

Jun 16 '21 16:06 timolins

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

Jun 17 '21 04:06 heyfuaad

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 !

Aug 03 '21 09:08 DavoCg

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

May 16 '22 22:05 SunsetUzuki

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

Oct 04 '22 10:10 garmeeh

@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.