How To Use React Toastify?

Toast notifications are a common UI pattern in web applications. They provide users with feedback, updates, or alerts in a non-intrusive manner. Toasts allow developers to notify the user of an important update about the app’s state, user flow, or event without disturbing the current user interface.

While building React applications, there are two major ways you can implement toast notifications. You can build your own notification system or use a library. Almost all React developers I’ve worked with have opted for the second, as no one likes to reinvent the wheel. Furthermore, almost always, the library they opt for is React Toastify!

React Toastify is a robust, flexible, and easy-to-use library that simplifies adding customizable and responsive toast notifications to your React applications. In this blog, let’s dive deep into React Toastify.

Why React Toastify?

React Toastify is the most popular notification library for React with over 20 million weekly downloads. What makes it so special to use, you may ask. The library stands out due to its simplicity, feature-rich API, and developer-friendly design.

• Easy to use: Simple API for quick integration, even a newbie can use it.

• Customizability: You can customize each and every aspect of the toast to make its visual appearance in a sink with your project.

• Responsiveness: The library is mobile-friendly and adaptive. That means you can make it work effortlessly on various screen sizes with negligible additional code.

• Feature-rich: The library supports notifications, animations, and automatic dismissal, along with many other features that would break a sweat if you decide to implement your notification system.

• Zero dependencies: It’s lightweight and efficient, requiring no dependency to work.

Getting Started With React Toastify

Using React Toastify is as simple as installing the dependency and adding a container at the root of your project. Let’s see how it’s done.

In your React application, execute the following command:

npm i react-toastify

Adding a toast container

React Toastify requires a global component to be placed at the root of your project.

import { ToastContainer } from "react-toastify";
import Router from "@/pages/router";

export default function App() {
  return (
    <main className="flex flex-col min-h-screen">
      <Router />
      <ToastContainer />
    </main>
  );
}

Your first toast with React Toastify

Now let’s write our first toast. We will write a very basic toast that pops up a notification saying “I am a toast!” on a button click.

import { toast } from "react-toastify";
import { Button } from "@/components/ui/button";

export default function Toast() {
  const notify = () => toast("I am a toast!");

  return (
    <div className="flex h-screen w-screen items-center justify-center">
      <Button onClick={notify}>Click me</Button>
    </div>
  );
}

This is how it'd render on the screen:

Now, let’s dive deep into the nitty-gritty of the app.

Toast Options

You can customize each toast by passing an options object. Here are some of the most commonly used options.

Toast type

React Toastify supports different types of notifications, each suited for specific use cases. You can invoke these classes using specific methods. Here’s an example:

toast("Successful toast", { type: "success" });

You can have four types of toasts you can display: success, error, info, and warning. There’s also the fifth type, defualt, which requires no additional config.

This is how different toast types look:

Toast position

This option sets the position of the toast on the screen.

toast("I am at the bottom right", { position: "bottom-right" });

There are multiple positions available for you to render your toast: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left. By default, it is displayed on the top-right of the screen.

Auto close

You can control the duration for which the toast is displayed with autoClose property. This property accepts a number or false. Set the time in milliseconds you want to render the toast, or set to false if you want to disable the auto close.

toast("This will disappear after 5 seconds", { autoClose: 5000 });
toast("I will never go haha", { autoClose: false });

Theme

You can choose between light, dark, or colored themes.

toast("It feels like we are watching a DC film...", { theme: "dark" });

This is how light and dark look by default:

Adjust the close button

You can adjust the close button of the toast according to your needs. You can either hide the close button completely or replace it with a custom component.

toast("I have custom close button."), { closeButton: <button>X</button> });

There are more config options that you can set for every toast. Refer to the official documentation to see all the options.

Global Configuration

If you want to add the same configuration to all toasts, you’d end up writing a lot of duplicate code. The library provides a way to configure these settings globally. You can send props to the <ToastContainer /> component and all toasts will follow the same config.

<ToastContainer
  position="bottom-right"
  autoClose={5000}
  pauseOnHover
  theme="dark"
/>

The <ToastContainer /> accepts many other props. It’s very similar to what we covered in the previous section. Refer to the ToastContainer documentation to get a better idea of the global configuration props.

Styling a Toast

In this section, let’s explore how you can style a toast. There are multiple ways by which you can style a toast. We will go through the most useful ways that you’d often use in your projects.

Passing down CSS Classes to the component

The most basic approach is to simply pass down CSS to the toast. You can either pass it to the toast() as one of the properties or add it to the global config.

<ToastContainer
  className="bg-blue-400 p-4 m-0"
  style={{ width: "fit" }}
/>;

toast("Local toast styling",
 { style: { border: "4px solid green" },
   className: "shadow-md hover:shadow-lg"
 }
);

This is how toasts would look on the screen. I have exaggerated the design a lot, but I hope you get the idea :)

CSS classes as functions

You can also provide a function that returns class names.

const contextClass = {
  success: "bg-blue-600",
  error: "bg-red-600",
  info: "bg-gray-600",
  warning: "bg-orange-400",
  default: "bg-indigo-600",
  dark: "bg-white-600 font-gray-300",
};

const App = () => {
  return (
    <>
      <button onClick={() => toast.success("This is a success toast!")}>
        Show Success Toast
      </button>

      <ToastContainer
        toastClassName={(context) =>
          contextClass[context?.type || "default"] +
          "relative flex p-1 min-h-10 rounded-md justify-between overflow-hidden cursor-pointer"
        }
        position="bottom-left"
        autoClose={3000}
      />
    </>
  );
};

Styling the progress bar

You can style the progress bar simply by adding progressClassName prop to wither <ToastContainer /> for global config and toast() for the particular toast.

toast("My progress bar is built different", {
  progressClassName: "h-4 gradient-progress-bar",
});

Overriding existing CSS classes and variables

If you want full control of your toast, you can override CSS classes as well as the variables set by the library. You can override almost any class except classes used for animation and media queries.

You can find the whole list of class names in the official documentation.

Furthermore, the list of all CSS variables can be found on this page of its official documentation.

Custom Toast Components

You can render a custom component as a toast with React Toastify. This makes customizing the look and feel of the notifications straightforward. Let’s write a simple component which we’ll use as a toast:

import { ToastContentProps } from "react-toastify";

interface CustomToastProps extends ToastContentProps {
  data: {
    message: string;
  };
}

export default function CustomToast({
  closeToast,
  data,
  isPaused,
  toastProps,
}: CustomToastProps) {
  return (
    <div className="p-4 rounded-lg bg-green-600 text-white shadow-lg">
      <h4 className="text-lg font-semibold">Custom Notification</h4>
      <p className="mt-2 text-sm">{data.message}</p>
      <p className="mt-2 text-xs italic">Paused: {isPaused ? "Yes" : "No"}</p>
      <button
        onClick={closeToast}
        className="mt-4 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
      >
        Dismiss
      </button>
    </div>
  );
}

Let’s understand the code.

When you provide a component, four props are injected into your component: closeToast, data, isPaused, and toastProps. Furthermore, you can pass down custom data by using the data prop. You can extend the ToastContentProps provided by React Toastify to typeface your component.

The component is written and works like any other React component you write. You can manage the toast’s state by using the four props.

Now, let’s see how a custom toast component will be rendered.

import { toast } from "react-toastify";

export default function App() {
  const showToast = () => {
    const data = { message: "Hello from custom toast!" };
    toast(<CustomToast />, {
      data,
      autoClose: 5000,
      position: "bottom-right",
      pauseOnHover: true,
    });
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <button
        onClick={showToast}
        className="px-6 py-3 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition-colors"
      >
        Show Custom Toast
      </button>
      <ToastContainer />
    </div>
  );
}

We call the showToast() on button click, which calls the toast() which is responsible for rendering the toast. We pass the custom toast component we wrote in the previous section and add other necessary configs. And that’s it! Your custom toast is ready.

One gotcha is that TypeScript will scream at you with red squiggly lines as our custom toast components expect some props. As a workaround, you can call the toast() like the following:

toast(
  ({ closeToast, toastProps, isPaused }) => (
    <CustomToast
      closeToast={closeToast}
      data={data}
      isPaused={isPaused}
      toastProps={toastProps}
    />
  ),
  {
    autoClose: 5000,
    position: "bottom-right",
    pauseOnHover: true,
  }
);

This would make TypeScript happy! And it'll look like this on the screen:

Animating Toast Notifications

React Toastify provides a cssTransition() function to add animation to the toast. The function accepts five properties:

• enter: The class name that will be used when the toast starts rendering. It’s a required property.

• exit: The class name that will be used when the toast exists from the DOM. It is a required property as well.

• appendPosition: This is a boolean that decides whether to append the position to the class name. It is set to false by default.

• collapse: The boolean value that collapses the toast after the exit animation. It is set to true by default.

• collpaseDuration: The number that defines the collapse duration. By default, it is set to 300ms.

Here’s an example of animating a toast:

import { cssTransition } from "react-toastify";

const customAnimation = cssTransition({
  enter: "zoomIn",
  exit: "zoomOut",
  appendPosition: false,
  collapse: true,
  collapseDuration: 300,
});

toast("Custom Animation", { transition: customAnimation });

Other quick guides

There are so many things that we can customize in a toast rendered with React Toastify. Not every feature requires it’s a separate section. Hence, we will cover some small yet useful features Raect Toastify provides out of the box.

Multiple toast containers

You can provide multiple containers where each container would have it’s separate configurations. Containers are identified by the containerId prop. However, it is strongly advised not to use multiple containers as it leads to bugs and brittle code.

Still, if you know what you are doing, here’s how you can do it:

import { ToastContainer, toast } from "react-toastify";

export default function App() {
  const notifyContainerA = () =>
    toast("I am inside container A", { containerId: "A" });
  const notifyContainerB = () =>
    toast("I am inside container B", { containerId: "B" });

  return (
    <>
      <button onClick={notifyContainerA}>Notify Container A</button>
      <button onClick={notifyContainerB}>Notify Container B</button>

      <ToastContainer containerId="A" position="bottom-right" />
      <ToastContainer containerId="A" position="bottom-left" />
    </>
  );
}

This would render the first button on the bottom right, whereas the second button will be rendered on the bottom left.

Programmatically removing a toast

A unique ID is stored every time a toast is rendered on the screen. We can use this property to programmatically remove the toast whenever we want.

import { useRef } from "react";
import { toast } from "react-toastify";

function Example() {
  const toastId = useRef(null);

  const notify = () => (toastId.current = toast("I am a toast!"));
  const dismiss = () => toast.dismiss(toastId.current);
  const dismissAll = () => toast.dismiss();.3

  return (
    <div>
      <button onClick={notify}>Notify</button>
      <button onClick={dismiss}>Dismiss</button>
      <button onClick={dismissAll}>Dismiss All</button>
    </div>
  );
}

If you call toast.dismiss() without any arguments, all toasts that are currently displayed on the screen will be removed.

Handing promises inside the toast

React Toastify provides a mechanism to handle async code. You can use the promise() function that accepts a promise or a function that returns a promise. The toast will update itself based on the promise.

const resolveVerySoon = new Promise((resolve) => setTimeout(resolve, 5000));

toast.promise(resolveVerySoon, {
  pending: "Promise is pending...",
  success: "Promise resolved yeahhh",
  error: "Promsie rejected :(",
});

Making your toast accessible

As toasts convey important information to the user, they must be accessible. By default, all toasts are displayed with the ARIA role alert. This can be changed globally or per toast.

<ToastContainer role="log" />;

toast("hello", {
  role: "log",
});

Both <ToastContainer /> and toast() accept ariaLabel prop as well. This is quite helpful for screen readers and also for testing.

<ToastContainer ariaLabel="toast-notification" />;

toast("hello", {
  ariaLabel: "toast-notification",
});

Wrapping Up

React Toastify is a go-to library for implementing a notification system in your React application. Its simplicity, flexibility, and customizability allow you to get full control of toasts, so you can display toasts that match the design aesthetics of the rest of your app.

I hope you found this article helpful. If you do, share it with your peers and colleagues so they can benefit from it. If there’s something specific you want to read about around the React ecosystem, front-end, or software development in general, feel free to reach out. I would love to pick it as the next topic. I am most active on Peerlist and Twitter.

If you are looking for a new job, or want to share a cool project you built with like-minded folks, check out Peerlist today!