feat(Toaster, toast): #158 Support multiple, distinct Toasters by id

[mrmiguu]

What

<Toaster> and toast() currently have no way of communicating
distinctly if there exists multiple Toaster elements throughout. Add a
way for toast calls to "pop up" exclusively from any specific Toaster

Changes

Add toasterId to <Toaster> props

Add toasterId to all toast*() calls under the options? arg

[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/Gugjg2MLUq7odnwhata5Jwt7HnuW
✅ Preview: https://react-hot-toast-git-fork-mrmiguu-support-multiple-07c6bd-timo1.vercel.app

[timolins]

Hi @mrmiguu! Thanks for you PR.

I haven't tried it out yet, but it looks like there will be issues with the offset calculation. The current implementation prevents rendering of toasts with a different id, but they are still used inside the calculateOffset function.

Ideally we pass the ID to useToaster (which then passes it to useStore), so the state can take the id into consideration. Adding option support to the useToaster hook would also allow us to introduce other options like toastLimit (#31)

[joshsny]

This looked like it was going to be so great 😢 Thanks for the work on it @mrmiguu!

[timolins]

I picked up work on this feature again in #383 again. Very excited for it.

Here is a hosted example of the new docs for it: https://react-hot-toast-git-multi-toaster-timos-team.vercel.app/docs/multi-toaster