How to Create Smoking Hot Toast Notifications in ReactJS with the React Hot Toast Module

The role of user experience in web development cannot be underestimated. Notifications have a key role in this, whereby the user is notified of changes made to the content. Besides, they notify customers about something that has happened, something new, or something that is about to happen. Notifications in web apps are commonly achieved through toasts. These are non-spooky and are only for a short period of time. It is like a fleeting shadow; they materialize on the screen and dematerialize after a few moments. In this article, we are going to show the steps for creating toast notifications using the React Hot Toast module in ReactJS.

React Hot Toast Module

The React Hot Toast is an extension of the React library that produces toast messages. It is lightweight and customizable. It effectively assists in the creation of beautiful notifications in React applications. This module enables one to generate different types of toast notifications like success, error notifications, and information messages. The usage of this module is very simple, and it is very lightweight, with an approximate size of 5Kb.

Features

Let’s first learn about toast notifications in general before we explore the React Hot Toast module. A toast notification is a small bubble that displays a message at the top or bottom right-hand corner. It gives information about an operation to the user. Some platforms also allow users to click and dismiss it, while in other applications, the notification disappears on its own after some time, usually between 5 to 10 seconds.

Some of the main features of React Hot Toast are:

1. Easy to Use: When considering the usage and adoption of the library in React projects, then it is relatively easy to implement and use.
2. Customizable: You also have direct control to style the toasts according to the look and feel of your application.
3. Lightweight: The best part is the size of the module and its functionality in keeping your application fast and responsive.
4. Various Toast Types: Generate regular toasts, success toasts, errors and other kinds of toasts.
5. Themed Toasts: A strategy involves adding unique styles to your toasts.
6. Positioning: Position toasts in different tiny squares on the screen.
7. Multiline and Dark Mode: Add multiline and dark modes for toasts.
8. Emojis and Promise API: Include emojis and use the Promise API in toasts.

By employing React Hot Toast, there are several advantages to consider: First, it contributes to the improvement of the usability of software applications as a result of facilitation of clear and timely feedback. Second, it is lightweight, meaning that by using your application, you will not experience slow operations or a slow computer. Third, its customization options allow you to tailor notifications to your brand’s style, ensuring a consistent look and feel across your app. You can learn any React Certification Course to know how to use these toasts.

Also  Read  What is Virtual DOM in ReactJS

Approach

To create toast notifications in ReactJS with React Hot Toast, follow these steps:

Step 1: Installation and Setup

First of all, one should create a new project directory. Open the terminal and run the command to create a React app:

npx create-react-app notification

After the app is created, switch to the new folder:

cd notification

Then, you require to install the React Hot Toast package. For that, run the command mentioned below:

npm install react-hot-toast

This command will install the required package for your project.

Step 2: Importing and Initialization

Now that you have installed the React Hot Toast module, you can go ahead and import it into your project. Open the App.js file and import the necessary components from the library:

<b>import React from "react";</b>

<b>import { Toaster } from "react-hot-toast";</b>

<b>function App() {</b>

<b>    return (</b>

<b>        &lt;div&gt;</b>

<b>            {/* Other components */}</b>

<b>            &lt;Toaster /&gt;</b>

<b>        &lt;/div&gt;</b>

<b>    );</b>

<b>}</b>

<b>export default App;</b>

The most straightforward is the Toaster component. It serves as a receptacle for all the toast notifications.

Step 3: Displaying a Basic Toast Notification

To show a simple form of the toast notification it is necessary to create a new component. Import the toast function and use it to show a notification:

import React from "react";</b>

<b>import { toast } from "react-hot-toast";</b>

<b>function NotificationExample() {</b>

<b>    const notify = () => toast("Hello, this is a toast notification!");</b>

<b>    return (</b>

<b>        <div></b>

<b>            <button onClick={notify}>Show Toast</button></b>

<b>        </div></b>

<b>    );</b>

<b>}</b>

<b>export default NotificationExample;

In this example, we developed a straightforward button that displays a toast notification with a generic message when clicked.

Step 4: Customizing Toast Notifications

React Hot Toast makes it very simple to customize toast notifications. You can customize how the toast notification looks and how it behaves. 

</b>

<b>toast('Action successful!', {</b>

<b>    position: 'bottom-left',</b>

<b>    duration: 3000,</b>

<b>    style: {</b>

<b>        backgroundColor: '#28a745',</b>

<b>        color: '#fff',</b>

<b>        padding: '10px',</b>

<b>        borderRadius: '8px',</b>

<b>    },</b>

<b>});

In this code, the toast notification appears at the bottom left of the screen by default. You can also give colour to these toasts and modify their overall look! Isn’t that amazing?

Step 5: Dynamic Content and Event Handling

Toast notifications can be customized with both content and events. So, let’s learn about this from the example below:

toast('New message received!', {</b>

<b>    duration: 4000,</b>

<b>    style: {</b>

<b>        backgroundColor: '#17a2b8',</b>

<b>        color: '#fff',</b>

<b>    },</b>

<b>    onClick: () => {</b>

<b>        console.log('Notification clicked');</b>

<b>    },</b>

<b>});

In this example, the toast notification is displayed with an icon and has a duration of 4 seconds. It also prints out a message to the console when clicked.

Step 6: Multiple Types of Notifications

With the help of React Hot Toast, you can create multiple types of notifications. Employ various functions such as toast.success(), toast.error(), and toast.loading() depending on the circumstances of the situation. 

toast.success('Operation was successful!', {</b>

<b>    style: {</b>

<b>        backgroundColor: '#28a745',</b>

<b>        color: '#fff',</b>

<b>    },</b>

<b>});</b>

<b>toast.error('Something went wrong!', {</b>

<b>    style: {</b>

<b>        backgroundColor: '#dc3545',</b>

<b>        color: '#fff',</b>

<b>    },</b>

<b>});</b>

<b>toast.loading('Loading, please wait...', {</b>

<b>    style: {</b>

<b>        backgroundColor: '#ffc107',</b>

<b>        color: '#000',</b>

<b>    },</b>

<b>});

All these forms of notification have different functions to perform. Success notifications alert users of successful operations. Information notifications inform the users of errors or difficulties. The loading notifications make users aware of the processes that are being performed.

Step 7: Global Notification Management

Notifications can also be initiated from different parts of an application. Take advantage of the global notification system offered by ReactHotToast.

import { toast } from 'react-hot-toast';</b>

<b>function AnotherComponent() {</b>

<b>    const triggerNotification = () => {</b>

<b>        toast('Notification from another component!', {</b>

<b>            style: {</b>

<b>                backgroundColor: '#6c757d',</b>

<b>                color: '#fff',</b>

<b>            },</b>

<b>        });</b>

<b>    };</b>

<b>    return (</b>

<b>        <button onClick={triggerNotification}>Trigger Notification</button></b>

<b>    );</b>

<b>}</b>

<b>export default AnotherComponent;

Step 8: Styling and Theming

The color schemes for your toast notifications should be aligned, and therefore, it is crucial to style and theme them properly. You can create custom backgrounds for the toast notifications. This aids in ensuring that they fit into the overall design and branding plan of your application. undefined

toast('Custom styled toast', {</b>

<b>    style: {</b>

<b>        border: '1px solid #343a40',</b>

<b>        padding: '16px',</b>

<b>        backgroundColor: '#f8f9fa',</b>

<b>        color: '#343a40',</b>

<b>    },</b>

<b>});

Step 9: Accessibility Considerations

This is very important as it speaks a lot about the usability aspect of the application. Make sure that the toast notifications are friendly for users of all levels. Ensure your notifications are accessible, conform to accessibility standards, and are intelligible to the target audience. 

toast('Accessible notification', {</b>

<b>    duration: 5000,</b>

<b>    style: {</b>

<b>        backgroundColor: '#007bff',</b>

<b>        color: '#fff',</b>

<b>    },</b>

<b>    ariaLive: 'assertive',</b>

<b>});

1. Try to keep the messages simple and uncluttered.
2. Make sure the notifications have a keyboard shortcut by which they can be accessed.
3. Make sure the notifications are readable to any screen readers.
4. Accessibility provides a guarantee that people with disability will be able to use your application effectively.

Also Read React Compiler: Everything You Need to Know

FAQs

How to use React Hot Toast in React JS?

To implement React Hot Toast in a React JS application, you must install this package using npm or yarn. The Toaster component should now be imported into your main file, while the Toast function should be imported into the components that will be used to send out notifications.

How do I create a toast notification in React?

Use React Hot Toast by importing the toast function and creating a toast notification in React. Edit the function so that it will display a notification message when called.

How to use React Hot Toast in Next JS 13?

Getting React Hot Toast to work in Next JS 13, therefore, involves steps similar to those outlined above in React JS. To display messages, you have to install the package, import the components into your project, and then use the toast function.

What is the toast time in React?

The toasting time in React can be understood as the time the toasting notification is displayed on the screen. This can be set using the ‘duration’ parameter when constructing a toast function.

What is the alternative to React Hot Toast?

Another popular library similar to React Hot Toast is ‘react-toastify.’ It is another popular library for creating toast notifications in React applications.

How to use heatmap js in React?

To use heatmap.js in React, install the package and include it in your component by following these steps. It is an instance of a heatmap that you could use to create and manipulate heatmaps in your React environment.

React Hot Toast provides a set of tools to implement toast notifications in your ReactJS applications quickly. It has numerous features and advanced user settings. Now that you have read through the processes laid out in this article, you are well-placed to create attention-grabbing and informative toast notifications.