react-hot-toast Support multiple <Toaster> elements

Support multiple <Toaster> elements

Open mrmiguu opened this issue 2 years ago • 17 comments

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 />
  </>
)

Mar 05 '22 23:03 mrmiguu

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

Mar 06 '22 13:03 timolins

This would be super helpful.

Mar 07 '22 10:03 oscar-at-seatti

Please, consider, would be amazing feature

Mar 10 '22 22:03 TrejoCode

https://github.com/timolins/react-hot-toast/pull/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".

Mar 11 '22 08:03 mrmiguu

looking forward to having this!

Nov 08 '22 04:11 rickyzhangca

hi all, how about this

Nov 10 '22 11:11 bolerap

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

May 03 '23 20:05 mattellig

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

May 09 '23 18:05 Mirajjj

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.