React-hot-toast set-up in nextJS: Make your notification next Level

Toast notifications are small pop-up messages that briefly appear on a website or application to notify users of events such as successful actions or errors. In this article, I’ll guide you through the process of integrating toast notifications into your NextJS application using the react-hot-toast library.

Introduction To React-Hot-Toast

React-hot-toast is a helpful tool for adding little pop-up messages to your React apps. These messages, called toast notifications, quickly tell users about successes or errors without being too invasive. With react-hot-toast, you can easily customize these notifications to fit your app’s style. In this guide, we’ll learn how to use react-hot-toast in your NextJS app, making it easy to keep users informed about what’s happening.

Let’s set up React-Hot-Toast in NextJS

Prerequisites

Before diving into the integration process, make sure you have NodeJS installed on your system.

let’s assume that you know how to create a nextJS app and basic use of NodeJS, If you don’t have installed NodeJS than visit nodejs.org and download and install LTS version of NodeJS

Install React-Hot-Toast in NextJS app

npm install react-hot-toast

or using yarn

yarn add react-hot-toast

Import React-Hot-Toast in your main Layout Page

import { Toaster } from 'react-hot-toast';

const Layout = ({ children }) => {
  return (
    <>
      <Toaster />
      {/* Other layout components */}
      {children}
    </>
  );
};

export default Layout;

Add Toast In Your Page Where You Want Too Show

// Filename - ToastNotificationExample.js
 
import toast, { Toaster } from "react-hot-toast";
  
const success = () =>
    toast.success("Successfully registered");
 
const error = () => toast.error("Oops! An error occurred.");
 
function ToastNotificationExample() {
    return (
        <>
            <div className="notificationContainer">
                <button onClick={success}>
                    Success Toast
                </button>
                <button onClick={error}>Error Toast</button>
            </div>
        </>
    );
}
 
export default ToastNotificationExample;

In this example we add two function for success and error.

Customization Option In React-Hot-Toast

Styling

Customizing the appearance of toast notifications allows developers to align them with the application’s design theme. Let’s apply custom CSS styles to change the background color and text color of toast notifications.

import toast from "react-hot-toast";

const customStyle = {
  backgroundColor: "#4CAF50", // Green background
  color: "#FFFFFF", // White text
};

const success = () => toast.success("Successfully registered", { style: customStyle });

Positioning

Toast notifications can be positioned at different locations on the screen, Make sure they are visible without blocking the user interface. Here, we’ll position the toast notifications at the top-right corner of the screen.

import toast from "react-hot-toast";

const success = () => toast.success("Successfully registered", { position: "top-right" });

list of options of positioning

1. top-left
2. top-center
3. top-right
4. bottom-left
5. bottom-center
6. bottom-right

Variants

Define custom toast variants with unique styles and behaviors to convey different types of messages. Let’s create a custom variant for warning messages.

import toast from "react-hot-toast";

const customVariant = {
  icon: "⚠️", // Custom warning icon
  style: {
    backgroundColor: "#FFA500", // Orange background
    color: "#FFFFFF", // White text
  },
};

const warning = () => toast("Warning: Data may be outdated", { icon: customVariant.icon, style: customVariant.style });

Duration

Control the duration for which toast notifications remain visible on the screen. Here, we’ll set the duration to 5000 milliseconds (5 seconds).

import toast from "react-hot-toast";

const success = () => toast.success("Successfully registered", { duration: 5000 });

Transition Effects

Add transition effects and animations to enhance the visual appeal of toast notifications. Let’s add a fade-in animation when the toast notifications appear.

import toast from "react-hot-toast";

const success = () => toast.success("Successfully registered", { style: { animation: "fade-in 0.5s" } });

Conclusion

Integrating React Hot Toast into your NextJS application significantly improves user interaction and communication. Experiment with different settings and scenarios to customize toast notifications according to your application’s requirements.

Explore another Notification Library for React Toastify

FAQs