What is React-Toastify?

React-Toastify is a popular library that allows us to display toast notifications in our web application with ease. Toast notifications are small pop-up messages that usually appear based on some user activity and fade away after a set duration. Toast messages can be of various types: success messages, error messages, warnings, information, etc.
React-Toastify provides a set of components and APIs, which makes it easy to create and manage these notifications. It also allows us to change and customize the appearance of these notifications according to our use case.

Installing the `React-Toastify` library

To use the React-Toastify library, we first need to install it using the following command:

import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
function App() {
  // Display the success notification on the top-right corner that disappears after 5s
  const notifySucces = () => {
    toast.success("This is a success message!", {
      position: toast.POSITION.TOP_RIGHT,
      autoClose: 5000,
      hideProgressBar: true,
    });
  };
  return (
    <div>
          <button onClick={notifySucces}>Display Success</button>
          <ToastContainer />
    </div>
  );
}
export default App;

First, we will define a notifySuccess function and call the toast.success function inside to display a success message. The first argument of the function displays a toast message. In the second argument of the function, we can customize the behavior of these notifications.

Line 9: position: toast.POSITION.TOP_RIGHT specifies that the notification should appear on the top-right of the screen. We can set this position to top, bottom, or center.
Line 10: autoClose: 5000 specifies that the notification should automatically close after 5000ms or 5s.
Line 11: hideProgressBar: true hides the progress bar, which shows the remaining time until the notification disappears. By default, it is set to false.
Line 16: When the button is clicked, the notifySuccess function is triggered, which displays a toast notification.
Line 17: The <ToastContainer /> component provides a space for toast notifications to appear.

Final code

Similarly, we can display toast notifications for failure, warning, and additional information using the toast.error, toast.warn, and toast.info functions respectively. Here is the final code for displaying different types of toast notifications:

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

function App() {
  // Display success notification on the top right corner disappears after 5s
  const notifySucces = () => {
    toast.success("This is a success message!", {
      position: toast.POSITION.TOP_RIGHT,
      autoClose: 5000,
      hideProgressBar: true,
    });
  };
  // Display error notification on the top left corner disappears after 4s
  const notifyError = () => {
    toast.error("This is an error message!", {
      position: toast.POSITION.TOP_LEFT,
      autoClose: 4000,
    });
  };
  /* Display warning notification on the bottom left corner 
      disappears on clicking the close button*/
  const notifyWarning = () => {
    toast.warn("This is a warning message!", {
      position: toast.POSITION.BOTTOM_LEFT,
      autoClose: false,
      closeOnClick: true,
    });
  };
  // Display info on the bottom right corner disappears after 3s
  const notifyInfo = () => {
    toast.info("This is an info message!", {
      position: toast.POSITION.BOTTOM_RIGHT,
      autoClose: 3000,
    });
  };

  return (
    <div>
      <ul>
        <li>
          <button onClick={notifySucces}>Display Success</button>
        </li>
        <li>
          <button onClick={notifyError}>Display Error</button>
        </li>
        <li>
          <button onClick={notifyWarning}>Display Warning</button>
        </li>
        <li>
          <button onClick={notifyInfo}>Display Info</button>
        </li>
        <ToastContainer />
      </ul>
    </div>
  );
}

export default App;

React-Toastify example with different types of toast notifications

Free AI Mock Interviews

Coding Interview

Coding PatternsFree Interview

Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.

System Design

You TubeFree Interview

Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

What is React-Toastify?

Installing the React-Toastify library

Displaying toast notification for successful activity

Final code

Installing the `React-Toastify` library