Add support for multiple toasters

[timolins]

This PR implements the ability to have multiple toasters at once.

// Create a toaster with a custom id
<Toaster id="custom-toaster" />;

// Create a toast within the new toaster
toast.success('Nice toast!', {
  toasterId: 'custom-toaster',
});

<Toaster /> // Default toaster
<div>
  <Toaster
    toasterId="area1"
    containerStyle={{ position: 'absolute' }}
  />
</div>
<div>
  <Toaster
    toasterId="area2"
    containerStyle={{ position: 'absolute' }}
  />
</div>

Related issue

Closes #158

[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	Jan 21, 2025 9:45pm

[github-actions]

size-limit report 📦

Path	Size
dist/index.js	5.3 KB (+4.76% 🔺)
dist/index.mjs	4.99 KB (+5.23% 🔺)
headless/index.js	2.07 KB (+12.4% 🔺)
headless/index.mjs	1.79 KB (+14.74% 🔺)

[GitScorz]

Is this ready? I really need this, but the latest version is still 2.5.1.

[timolins]

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.

[maxratajczak]

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.

So far I've been testing/using the beta and it's working great 👍 Thanks!