Open In App

How to create smoking hot toast notifications in ReactJS with React Hot Toast module ?

Improve
Improve
Like Article
Like
Save
Share
Report

In React, Toast notifications or alerts are modal-like components that display information, or any message to users, usually via buttons. Toast notifications are commonly used to display : 

  • A notification or a custom message. 
  • A success message upon submission of a form.
  • An error message if the API request fails.

Prerequisites

Approach

To create smoking hot toast notifications in ReactJS with React Hot Toast module we will install the package and show all the different types of Toast notifications provided by the module.

React Hot Toast Module

The React Hot Toast module is a lightweight and customizable library that adds beautiful notifications to our React application. 

Features: 

  • It is easy to use, customizable and lightweight. It weighs less than 5kb. 
  • We can make various toasts, such as notification, success, and error toasts. 
  • We can create a themed toast by adding unique styles to our toast. 
  • Notifications can be placed at the top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right positions.
  • Multiline and dark mode toasts are also possible.
  • It supports emojis.
  • We can use Promise API. 

Step 1: Make a project directory, head over to the terminal, and create a react app named “notification” using the following command:

npx create-react-app notification 

After the notification app is created, switch to the new folder “notification” using the following command:

cd notification

Step 2: After creating the React application, Install the react-hot-toast package using the following command:

npm i react-hot-toast

Step 3:  Modify your project structure. We will modify the folder and keep the files we need for this project. Add a style.css file to the folder. Make sure your file structure looks like this : 

Project structure:

Final Project Structure 

Dependencies list after installing packages

{
"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-hot-toast": "^2.4.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}

Example: Shows different types of toast notifications like success, Error, Multiline, Themed and Dark.

Javascript




// Filename - App.js
 
import React from "react";
import toast, { Toaster } from "react-hot-toast";
import "./App.css";
 
const notify = () => toast("Welcome to GeeksforGeeks");
 
const success = () =>
    toast.success("Successfully registered");
 
const error = () => toast.error("Oops! An error occurred.");
 
const bigToast = () =>
    toast(
        `GeeksforGeeks is a Computer Science Portal for Geeks
        .\n\nIt contains well written, well thought and well
        explained computer science and programming articles .`,
        {
            duration: 4000,
        }
    );
 
const themedToast = () =>
    toast(
        "Browse courses or read articles .",
 
        {
            style: {
                border: "1px solid green",
                padding: "16px",
                color: "green",
            },
        }
    );
 
const darkToast = () =>
    toast("Hello contribute to gfg!", {
        icon: "????",
        style: {
            borderRadius: "12px",
            background: "#333",
            color: "#fff",
        },
        position: "bottom-center",
    });
 
function App() {
    return (
        <>
            <div className="notificationContainer">
                <p> Toasting Notifications </p>{" "}
                <button onClick={notify}>
                    Notification Toast
                </button>
                <button onClick={success}>
                    Success Toast
                </button>
                <button onClick={error}>Error Toast</button>{" "}
                <button onClick={bigToast}>
                    Multiline Toast
                </button>
                <button onClick={themedToast}>
                    Themed Toast
                </button>
                <button onClick={darkToast}>
                    Dark Toast
                </button>
            </div>
            <Toaster
                position="top-center"
                reverseOrder={true}
            />
        </>
    );
}
 
export default App;


CSS




/* Filename - App.css */
 
.notificationContainer {
    margin: auto;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
 
button {
    margin: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
    padding: 1rem;
}
 
p {
    font-size: 2rem;
    color: green;
}


Step to run the application: Run the application by using the following command:

npm start 

Output: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser. This is how our application looks :

Our application will allow us to make numerous toast notifications simply by clicking various buttons. 

Output : Notification application 



Last Updated : 02 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads