React Toastify Made Easy: Custom Alerts For Your App

Want to add toast notifications to your React app?

React Toastify makes it simple! It helps you show quick messages, error alerts, or even live updates with ease. The setup is quick, and the features cover most needs.

In this blog, we’ll go through the installation, setup, and different ways to use it—from basic notifications to advanced customization. You’ll find practical examples, clear steps, and helpful diagrams to make everything easy to follow.

Let’s get started!

What is React Toastify?

React Toastify provides a simple API and a customizable notification system that integrates seamlessly with React applications. Toast notifications are non-intrusive messages that appear on the screen to inform users about various application events. They offer an unobtrusive way to provide immediate feedback without interrupting user workflows. Each toast carries a unique message that communicates the status.

The library improves user interaction by ensuring that custom notifications capture the user's attention without disrupting routine processes.

Conceptual Overview

The following diagram illustrates how React Toastify operates within a React application, showing the interaction between components, toast calls, and the rendering container.

This flow shows that the primary process in integrating notifications is linking the user action to the toast function call, which then renders inside a ToastContainer component. This mechanism facilitates both synchronous and asynchronous notification systems in modern web applications.

Installing and Setting Up React Toastify

Before diving into creating notifications, install React Toastify in your React project. Run the following command if you haven't already:

npm: npm install react-toastify

yarn: yarn add react-toastify

Make sure to import React Toastify correctly in one of your JavaScript files:

1import { ToastContainer, toast } from 'react-toastify';

​

Also, include the react-toastify/dist/ReactToastify.css file in your project's styling to maintain visual consistency. For organization, consider wrapping your notification logic into a dedicated module so that the toast function remains accessible across your components.

Creating Toast Notifications

React Toastify makes it straightforward to create toast notifications using the toast function. You can provide it with a string message, a React element, or even a React component for richer content.

A simple string toast notifies users quickly and efficiently. In addition to basic notifications, toast messages can be fully tailored based on user context.

Basic Example of a Toast Notification

1import React from 'react';
2import { toast } from 'react-toastify';
3
4const notifySuccess = () => {
5  toast.success("Operation completed successfully!");
6};
7
8const Example = () => (
9  <button onClick={notifySuccess}>Show Success Toast</button>
10);
11
12export default Example;

​

Different methods such as toast.error, toast.info , and toast.warn allow for diverse notification styling based on the nature of the message. You can also pass a React component for a more customized interface.

Customizing Toast Notifications

Beyond the basics, React Toastify offers several options to control the appearance and behavior of your notifications. Below are some key props and their usage.

Customization Properties

Property	Description
position	Define where the toast appears on the screen (e.g., top-right, top-left, bottom-right, bottom-left, top-center).
autoClose	Time in milliseconds before the toast automatically closes; set to false to disable.
transition	Specify an animation effect for the toast appearance and disappearance (e.g., Slide, Zoom, Flip, Fade).
progressLimit	Limit the number of toasts that display simultaneously.

You can use these properties to display notifications exactly where and how you want them.

Example Customization

1import { toast } from 'react-toastify';
2
3toast.info("Info Toast at Top Left", {
4  position: "top-left",
5  autoClose: 3000,
6  transition: toast.TRANSITIONS.SLIDE,
7  progressLimit: 2,
8});

​

This example sets a notification to appear at the top left with a slide transition. Custom CSS classes and icons can further refine the toast's appearance.

Advanced Features of React Toastify

Once comfortable with the basics, you can explore advanced features for dynamic interactions and improved user feedback.

Promise-based Toasts

The toast.promise function simplifies asynchronous operations by automatically updating notifications based on the promise's state.

1import React from 'react';
2import { toast } from 'react-toastify';
3
4const performAsyncAction = () => {
5  return new Promise((resolve, reject) => {
6    setTimeout(() => resolve("Async Action Success!"), 2000);
7  });
8};
9
10toast.promise(
11  performAsyncAction(),
12  {
13    pending: 'Action in progress...',
14    success: 'Action completed successfully!',
15    error: 'Action failed.',
16  }
17);

​

Dynamic Updates and Dismissal

React Toastify also provides a toast.update function to modify a toast after it has been rendered, useful for reflecting changes during ongoing tasks.

1const toastId = toast("Uploading file...");
2
3setTimeout(() => {
4  toast.update(toastId, {
5    render: "Upload complete!",
6    type: toast.TYPE.SUCCESS,
7    autoClose: 3000,
8  });
9}, 3000);

​

To dismiss a toast programmatically, use the toast.dismiss function. For checking active notifications, use toast.isActive.

Managing Toasts in a React Application

Effective toast management is crucial in larger applications where multiple notifications may be triggered simultaneously. Consider these key practices:

1. Centralized ToastContainer Management

Place the ToastContainer in a central location, such as your main App component, for consistent notification management.

2. Creating and Updating Toasts

Use toast and toast.update to create and modify notifications to provide clear and separate feedback for distinct user actions.

3. Dismissing Notifications

Ensure that outdated or long-running notifications are dismissed using toast.dismiss to prevent confusion.

Toast Management Example

1import React from 'react';
2import { ToastContainer, toast } from 'react-toastify';
3
4const NotificationManager = () => {
5  const createToast = () => {
6    const id = toast.info("Processing your request...", { autoClose: false });
7    setTimeout(() => {
8      toast.update(id, {
9        render: "Request processed successfully",
10        type: toast.TYPE.SUCCESS,
11        autoClose: 5000,
12      });
13    }, 4000);
14  };
15
16  return (
17    <div>
18      <button onClick={createToast}>Process Request</button>
19      <ToastContainer />
20    </div>
21  );
22};
23
24export default NotificationManager;

​

This example demonstrates centralized management and dynamic updates so each notification communicates the operation's progress.

Handling Events and Callbacks

React Toastify allows you to define callback functions for various notification events, which gives you control over user interactions and the notification lifecycle.

Callback Props

Callback Prop	When It’s Called	Use Case
onClose	When a toast is closed	Execute cleanup tasks.
onClick	When a toast is clicked	Navigate or trigger additional actions.
onMouseEnter	When a user hovers over a toast	Pause autoClose timer.
onMouseLeave	When a user leaves a toast	Resume autoClose timer.

For example, you might monitor button clicks to trigger notifications exactly when user actions occur. These callbacks allow detection of various interactions to refine notification behavior.

Practical Callback Example

1toast("Hover over me!", {
2  onMouseEnter: () => console.log("Toast hovered"),
3  onMouseLeave: () => console.log("Mouse left the toast"),
4  onClick: () => console.log("Toast clicked!"),
5  onClose: () => console.log("Toast closed!"),
6});

​

This example shows how to integrate logging functions with toast events, providing hooks to customize actions based on the lifecycle of a notification.

Best Practices for Using Toastify

Proper use of notifications enhances user experience without causing distraction. Consider these best practices when using React Toastify:

1. Keep It Concise

Use succinct messages that convey the notification's purpose to avoid confusion.

2. Feedback-Driven Design

Display notifications that affirm user actions or alert them to important statuses, selecting the appropriate message type.

3. Avoid Notification Overload

Too many notifications can overwhelm users. Utilize the progressLimit prop to restrict the number of simultaneous toasts.

4. Design Compliance

Customize toast CSS to align notifications with your application's overall design.

5. Use Callback Hooks

Implement callbacks like onClick and onClose to trigger further actions, ensuring that notifications remain interactive and meaningful.

Following these best practices helps ensure that notifications deliver clear, real-time user feedback that enhances the overall application experience.

Creating Custom Toasts

Sometimes the default toast styles may not suffice, and you may need a unique notification style. React Toastify allows you to pass custom React elements to the toast function for full control over appearance. Custom toasts can include personalized icons and formatted content for better visual feedback.

Custom Toast Example

1import React from 'react';
2import { toast } from 'react-toastify';
3
4const CustomToastContent = () => (
5  <div style={{ display: "flex", alignItems: "center" }}>
6    <img src="https://via.placeholder.com/40" alt="Icon" style={{ marginRight: "10px" }} />
7    <div>
8      <h4 style={{ margin: 0 }}>Custom Title</h4>
9      <p style={{ margin: 0 }}>This is a custom toast notification.</p>
10    </div>
11  </div>
12);
13
14const showCustomToast = () => {
15  toast(<CustomToastContent />, {
16    position: "bottom-right",
17    type: toast.TYPE.INFO,
18    autoClose: 4000,
19  });
20};
21
22const CustomToastExample = () => (
23  <div>
24    <button onClick={showCustomToast}>Show Custom Toast</button>
25  </div>
26);
27
28export default CustomToastExample;

​

This code demonstrates how to trigger a toast with a unique design and custom actions. Adjust the layout and behavior as needed to suit specialized requirements.

Wrapping Up

React Toastify makes it easy to add toast notifications to a React app. With a simple setup and plenty of customization options, developers can control how messages appear and behave. This guide covered everything from installation to advanced features like handling promises and dynamic updates. By following best practices, applications can provide clear and helpful feedback to users.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.