Setting Up Toast Notification in React with React-Toastify

Imagine a user submits a form on your website and waits. Nothing happens. They click the button again, creating a duplicate entry. This confusing experience disappears when you use a Toast Notification in React. These small, non-intrusive pop-ups provide instant feedback, telling users exactly what just happened.

In this react toast notification tutorial, we will guide you through Setting Up Toast Notifications in React with React-Toastify. You will learn how to add toast notifications in react applications to handle success messages, error alerts, and general updates efficiently.

What is React-Toastify and why use it?

React-Toastify is a lightweight and popular library that simplifies the process of adding notifications to your application. Instead of building a notification system from scratch with complex state management and CSS animations, React-Toastify handles the heavy lifting for you. It is widely considered the best way to implement toast notifications in react because it is flexible and easy to customize.

Why choose React-Toastify?

It offers a very simple setup with minimal configuration required.
You can customize animations, positions, and styling easily.
The library supports Right-to-Left (RTL) layouts automatically.
It includes interactive features like swipe-to-dismiss and pause-on-hover.
You can limit the number of toasts displayed at one time.
It remains lightweight and does not negatively impact app performance.

How to install and set up React-Toastify

Let’s dive into the react toastify setup step by step. First, you need to install the package into your project using your package manager.

Open your terminal and run one of the following commands:

npm install react-toastify

Once installed, you must import the library and its CSS file. It is best to do this in your root component, such as App.js or main.jsx, so the styles apply globally.

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => toast("Wow so easy!");

  return (
    <div>
      <button onClick={notify}>Notify!</button>
      <ToastContainer />
    </div>
  );
}

export default App;

In this code, the ToastContainer component renders the actual notifications. You can place it once in your main app component, and it will handle toasts triggered from anywhere in your application.

Handling different notification types

It is not always helpful to send a generic message. Specific feedback is required for real-world applications. For instance, you want a green success message when a person successfully signs in. You want a red error alert if their password doesn’t work.

This example code snippet for a React toast notification demonstrates how to set off various alert types:

import React from 'react';
import { toast } from 'react-toastify';

function NotificationComponent() {
  const showSuccess = () => {
    toast.success("Profile updated successfully!");
  }

  const showError = () => {
    toast.error("Failed to update profile. Please try again.");
  }

  const showInfo = () => {
    toast.info("New version available.");
  }

  const showWarning = () => {
    toast.warn("Your session is about to expire.");
  }

  return (
    <div>
      <button onClick={showSuccess}>Success</button>
      <button onClick={showError}>Error</button>
      <button onClick={showInfo}>Info</button>
      <button onClick={showWarning}>Warning</button>
    </div>
  );
}

This approach makes react toast notifications for beginners very approachable. You simply call the method that matches the context of your user’s action.

Customizing position and behavior

React-Toastify allows you to control where the notification appears and how it behaves. You might want the toast to appear in the bottom-right corner or disappear faster than the default setting. You can configure these settings directly on the ToastContainer:

<ToastContainer
  position="bottom-right"
  autoClose={3000}
  hideProgressBar={false}
  newestOnTop={false}
  closeOnClick
  rtl={false}
  pauseOnFocusLoss
  draggable
  pauseOnHover
  theme="dark"
/>

With these props, you ensure the Toast Notification in React fits the design and user experience requirements of your specific project.

Conclusion

Configuring Toast Notifications in a React App using React-Toastify is a huge boost to how your app interacts with your users. We have discussed how to implement toast notifications in a react app, installed the library, and implemented various types of notifications.

Using this tutorial, you are now able to create effective and aesthetically pleasing feedback mechanisms in your projects. Whether it is a success alert or a system notification, your users will always be in the know.

Codewolfy