Support multiple <Toaster> elements

[mrmiguu]

This might be outside of the scope for this project, but the ability to have multiple <Toaster> elements on a page (where toast() calls could have a ToasterID passed in) would be pretty cool and add a lot flexibility.

Example:

toast('This appears as a toast relative to the <div> parent', relativeToasterId)
toast('This appears as a normal toast')

...

return (
  <>
    <div>
      <Toaster id={relativeToasterId} />
    </div>

    <Toaster />
  </>
)

[timolins]

Hi @mrmiguu! Great suggestion - considered this for v2, but decided not to do it atm.

Let's use this issue to see how the demand is. 👍

[oscar-at-seatti]

This would be super helpful.

[TrejoCode]

Please, consider, would be amazing feature

[mrmiguu]

#159
☝️☝️☝️

This PR, if merged, essentially works like this:

toast('hello', { toasterId: 'unique-id-here' })

...

<Toaster toasterId="unique-id-here" />

This way, only that Toaster will be able to receive toasts to-and-from the string "unique-id-here".

[rickyzhangca]

looking forward to having this!

[bolerap]

hi all,
how about this

[mattellig]

This would be an extremely valuable feature! Please consider adding.

[Mirajjj]

Yeah. That is what we need right now. For now we will have to support a different functionality with the same behavior.

[Benimation]

My guess is that this doesn't use React Context yet.

If there could be something like a <ToastProvider>, you could use that multiple times and even nest them, where the innermost provider determines which one should be used. That could be really useful if you have one for general app messages, and another one inside of a sidebar or something like that.

I also noticed that it doesn't work out-of-the-box when you have a component library (in a different package) and want to toast things from there to the main app. A context could make that really easy, but for now I just passed the toast() function to our own context and retrieve it from there rather than importing it.

[hyung1721]

Any updates on this?

[Arcanorum]

pls ser?

[eugene-f02]

This would be an extremely valuable feature!

[sspenst]

+1, would definitely be helpful. Having to do some workarounds right now to get toasts to work with headless UI dialogs.

[codigoisaac]

Please consider this feature :)

[Hristo-Spasov]

This would be a great feature,hands down

[alexgoff]

would love to have this feature as well

[RyanTippsTX]

+1
I need some toasts to overlay on my video player

[AntoninoGargiuloBID]

Any news? It would be a great feature.

[r-josue]

Any news? It would be a great feature.

[emilywilder]

Just wanted to add my interest in this feature

[fccjr24]

need this too

[georgiosApo]

Any news on this? Been a while, would be an amazing feature to have 🤌

[fellypsantos]

I think the owner is not quite available to manage the repo, we have many pending pull requests, few months ago I was needing a feature, I sent a pull request and it's still pending, so I've forked the repo, implemented the feature that I was needing, and sent to NPM, temporary solution.

[timolins]

I started a PR (#383) for this! You can follow along there. 🎉

The WIP docs + demo can be viewed here: https://react-hot-toast-git-multi-toaster-timos-team.vercel.app/docs/multi-toaster

---

Edit: I just published v2.6.0-beta.0, which adds support for multiple toasters. You can give it a try with npm i react-hot-toast@beta. Testers and feedback are much appreciated.

Try it out: npm i react-hot-toast@beta