Open In App

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

Last Updated : 02 Nov, 2023
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 



Similar Reads

ReactJS | Hot Module Replacement
It is always recommended to start your react journey using the create-react-app which can be found here. It saves a lot of time as all the basic application backend is provided after installation, and we are only left to deal with the implementation details. Whenever we make changes in the main core 'app.js' file inside the create-react-app, and vi
3 min read
How to create toast in React Native ?
React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities. In this article, we will be learning how to create toast in React Native.
2 min read
Sending Push Notifications : Progressive Web Apps
We need permissions to send push notifications. Key Points : Notifications must be timely. Should be precise (contains all the information a user needs). Should be relevant to the user. Basic Example : An airline app must send push notifications such as "Your flight will be boarding from..." Browser that supports push notifications are : Chrome 44
3 min read
Background local notifications in Flutter
Sometimes user wants some very important features like the latest news updates, latest articles updates, weather condition alert, complete his/her profile update, future events update and much more in his/ her Android or iOS device without opening App and if you would like to develop this kind of Android and iOS application then this article will h
6 min read
How to receive server-sent event notifications ?
This is a one-way communication that is made with the server by making a single persistent connection. Initially, the client makes a connection with the server and waits for the trigger of the event by the server and the server triggers the events on the client by sending some messages to the client. Now, we will learn to get notified from the serv
3 min read
Custom Notifications in ElectronJS
ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime. Electron at its core is a NodeJS application havin
9 min read
ReactJS Onsen UI Toast Component
ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Toast Component allows the user to display dismissible information or simple actions at the bottom of the page. We can use the following approach in ReactJS to use the Onse
2 min read
ReactJS Blueprint Toast Component
BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. Toast Component provides a way for users to the user to show an ephemeral message as an overlay. We can use the following approach in ReactJS to use the ReactJS Blueprint Toast
3 min read
ReactJS Reactstrap Toast Component
Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The Toast Component allows the user to display dismissible information or simple actions at the bottom of the page. We can use the following approach in ReactJS to use the ReactJS Reactstr
3 min read
Difference between Hot Reloading and Live Reloading in React Native
Hot reloading and Live reloading are something that Reacts Native developers use on regular basis. Both have their own advantages and importance. But there are some key differences between these both. What is Hot Reloading ? Whenever you make any changes in your code, there is one thing that you have to do every time, and that saves your code and r
6 min read