Multiple Toasters

React Hot Toast supports multiple toaster instances in your app, They can be used and configured independently of each other. This is useful for having notifications in different areas of your app.

You can use multiple toasters by creating a Toaster with a unique toasterId:

<Toaster toasterId="sidebar" />

Example

This example shows two toasters, each maintaining their own state and configuration.

Basic Usage

You can create multiple toasters providing unique toasterId to each <Toaster /> component:

// Create a toaster with a unique id
<Toaster toasterId="area1" />

// Create another toaster with a unique id
<Toaster toasterId="area2" toastOptions={{ ... }} />

To create a toast in a specific toaster, you can pass the toasterId to the toast function.

// Create a toast in area 1
toast('Notification for Area 1', {
  toasterId: 'area1',
});

When no toasterId is provided, it uses "default" as the toasterId.

Positioning the toaster

When placing a toaster in a specific area of your app, set the position to absolute and the parent element to relative.

<div style={{ position: 'relative' }}>
  <Toaster
    toasterId="area1"
    position="top-center"
    containerStyle={{ position: 'absolute' }}
  />
</div>