ReactJS Toast Notification

Toast notifications are small, pop-up messages that show up on the screen to give users feedback about an action or event. They are typically used to inform users about something important without interrupting their experience. Toast notifications are generally used for:

• Informing the user about the success or failure of an action (e.g., "Item added to cart" or "Error saving data").
• Displaying minor updates without interrupting the user’s workflow.

Pre-requisites:

• NPM & Node.js
• React JS

Approach

Below are the some approaches :

• Install react-toastify: We will use the react-toastify npm package to create toast notifications in React.
• Set up Toast Container: Add a ToastContainer component to your app to hold all the toast messages.
• Display Toast Notifications: Use the toast function to trigger different types of notifications like success, error, or info.
• Customize Notifications: You can change the position, duration, and other properties of the toast messages by passing props to the Toast component.
• Enhance User Interaction: Toast notifications provide timely feedback, making the app more interactive and user-friendly.

Why Use Toast Notifications in ReactJS?

Toast notifications provide a number of advantages when used in React applications:

• Non-Intrusive: Toast notifications don’t interrupt the user’s interaction with the application, making them ideal for conveying background information or confirmation messages.
• Enhanced User Experience: They make your application feel more interactive by giving users instant feedback on their actions.
• Customizable: React offers great flexibility, allowing you to customize the appearance, duration, and behavior of toast notifications.

Steps to Create React Application and Install react-tostify

Step 1: Initialize the React Project using this command in the terminal.

npx create-react-app project

Step 2: Move to the project directory.

cd project

Step 3: Use this command to install the required module. 

npm i react-toastify

Project Structure:

Project Dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.1.3",
    "web-vitals": "^2.1.4"
},

Displaying a Toast Notification

By default, toast notifications appear at the top-right of the screen. Let’s start by adding a simple toast notification to your application.

// Filename - App.js

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

toast.configure();

function GeeksforGeeks() {
    const notify = () => {
        toast("Hello Geeks");
    };
    return (
        <div className="GeeksforGeeks">
            <button onClick={notify}>Click Me!</button>
        </div>
    );
}

export default GeeksforGeeks;

Output

Customizing Toast Notification Position

React-toastify supports different positions where the toast notifications can appear. These positions include top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.

// Filename - App.js

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

toast.configure();
function GeeksforGeeks() {
    const notify = () => {
        toast("Hello Geeks 4", {
            position: toast.POSITION.BOTTOM_LEFT,
        });
        toast("Hello Geeks 6", {
            position: toast.POSITION.BOTTOM_RIGHT,
        });
        toast("Hello Geeks 5", {
            position: toast.POSITION.BOTTOM_CENTER,
        });
        toast("Hello Geeks 1", {
            position: toast.POSITION.TOP_LEFT,
        });
        toast("Hello Geeks 3", {
            position: toast.POSITION.TOP_RIGHT,
        });
        toast("Hello Geeks 2", {
            position: toast.POSITION.TOP_CENTER,
        });
    };
    return (
        <div className="GeeksforGeeks">
            <button onClick={notify}>Click Me!</button>
        </div>
    );
}
export default GeeksforGeeks;

Output:

Using Different Toast Notification Types

React-toastify supports different types of notifications: success, error, info, and warning. You can specify the type using the toast.success(), toast.error(), toast.info(), or toast.warning() methods.

// Filename - App.js

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

toast.configure();
function GeeksforGeeks() {
    const notify = () => {
        toast.warning("Danger");
        toast.success("successful");
        toast.info("GeeksForGeeks");
        toast.error("Runtime error");
        toast("Hello Geeks");
    };
    return (
        <div className="GeeksforGeeks">
            <button onClick={notify}>Click Me!</button>
        </div>
    );
}
export default GeeksforGeeks;

Output

Customizing the Auto-Close Time

By default, toast notifications in react-toastify stay visible for 5 seconds. You can customize this duration using the autoClose prop.

// Filename - App.js

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

toast.configure();
function GeeksforGeeks() {
    const notify = () => {
        // Set to 10sec
        toast.warning("Danger", { autoClose: 10000 });
        // Set to 3sec
        toast.success("successful", { autoClose: 3000 });
        // User have to close it
        toast.info("GeeksForGeeks", { autoClose: false });
        toast.error("Runtime error", {
            // Set to 15sec
            position: toast.POSITION.BOTTOM_LEFT,
            autoClose: 15000,
        });
        toast("Hello Geeks"); // Default
    };
    return (
        <div className="GeeksforGeeks">
            <button onClick={notify}>Click Me!</button>
        </div>
    );
}
export default GeeksforGeeks;

Output

Conclusion

Toast notifications are an effective way to provide users with feedback in a non-intrusive manner, enhancing the overall user experience. With react-toastify, you can easily implement and customize toast notifications in your React applications, offering real-time feedback on various actions, events, or updates.

rana_prathviraj_singh

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• ReactJS
• ReactJS-Basics