How to Implement Toast Notifications in React with Sonner

Toast notifications are those small messages that pop up on the screen to inform the user of an event without interrupting their workflow.

Adding toasts to your React.js application is a fantastic way to enhance user experience by providing immediate feedback for actions.

If you want to incorporate this feature into your app, the sonner library offers a simple and effective solution. Here's a straightforward guide to get you up and running with sonner.

Begin by installing the sonner package. Open up your terminal and add it to your project with npm by running:

npm install sonner

Get started

After installing sonner, you'll need to render the Toaster component at the root of your application. This component is responsible for displaying the toast notifications. You can then use the toast function to trigger a toast anywhere in your app. Here's a basic example:

import { Toaster, toast } from 'sonner';

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast('My first toast')}>Give me a toast</button>
    </div>
  );
}

Types of Toasts

Sonner allows you to customize the type of toast to match the context of the notification, such as success, info, warning, error, and more. You can also pass an options object as the second argument to further customize the toast:

• Default: Use this for general notifications.
• Success: To indicate an action was completed.
• Info: For informational messages.
• Warning: To warn the user.
• Error: For error messages.
• Action: To prompt the user to take an action.
• Promise: To handle asynchronous actions.
• Custom: For fully customized toasts.

For example, to show a success message, you could use:

toast.success('Event has been created');

Check out the docs here for a guide on using each.

Positioning

The Toaster component allows you to specify the position of the toast notifications on the screen. The swipe direction for dismissing the toast changes depending on its position:

• top-left
• top-center
• top-right
• bottom-left
• bottom-center
• bottom-right

For example, to set the toasts to appear at the bottom-right corner of the screen:

<Toaster position="bottom-right" />

Expand Option

You can control the amount of visible toasts through the expand prop on the Toaster component. Setting expand to false limits the number of toasts shown simultaneously:

<Toaster expand={false} />

Additional Features

Sonner also supports rich colors for success, error, info, and warning toasts, a close button, and a headless mode for more customization:

// For a bit of color in your toast
toast.success('Woo something cool happened!')
<Toaster richColors />

// For a close button
toast('You signed up for the newsletter', {
  description: 'Check your inbox to confirm your subsciption',
})
<Toaster closeButton />

// Headless mode
toast.custom((t) => (
  <div>
     <button onClick={() => toast.dismiss(t)}>Hide me</button>
  </div>
));
<Toaster  />

This allows for a more visually appealing and interactive notification system.

Following these steps, you can quickly integrate toast notifications into your React app with sonner.

But I recommend checking out the docs here to ensure you are up to date and find more details on what I briefly discuss here.