Table of Contents
Toast notifications are important everywhere no matter it is web apps or mobile apps although there are 100s Toast libraries for React JS or React Based frameworks like Next.js each of these Toast libraries has different aesthetics and features, and that a great news for developers like us because we can choose what we need for our website.
React Hot Toast is one of these great libraries which we may consider to show toast notifications on our website.
About React Hot Toast
React Hot Toast is a great fit for the website with a sleek look and aspires to be a fast-loading website.
Some important features of React Hot Toast
- Easy to Use: Can be set up in a few simple steps and provides easy-to-use APIs.
- Highly Customizable: Provides lots of customization options so that you can set the best look of toast for your website. Also, it supports JSX components as child and supports Tailwindcss styling in that.
- Minimalistic: It offers a smooth user experience & notifications have a sleek look and feel light.
- Lightweight: Being lightweight is its best part as it’s only about 5KB including the stylesheet.
- Promise API: To show loading, success, or error in real-time.
- Accessibility: It’s highly accessible which helps to provide a toast message to most of your users.
Now let’s get started and set up React Hot Toast in our Next.js app.
Step 1: Project Set-up
In this tutorial, I am using Next.js 14 but this tutorial is relevant to React js and all React-based frameworks ( Next.js ).
Make sure are have already set up your Nextjs or React JS project.
In case you want to create a new Nextjs 14 project use the following command, follow prompts, and set up your project.
npx create-next-app@latest my-app You may change my-app to whatever name you want.
This is what my project looks like
Step 2: Installing react-hot-toast
To get started first, let’s install the react-hot-toast package in our project.
Open a new terminal in your project and run the below command.
npm i react-hot-toastyarn add react-hot-toastStep 3: Showing basic toast
React Hot Toast provides the following APIs
Basic APIs
- toast(): Called to render toast.
- Toaster: Wrapper for all toast messages.
Advanced APIs
- Toastbar: Api to customize look and animations of toasts
- useToaster(): Hook to access manage all toasts
- useToasterStore(): Hook to access internal states of all toast
First of all, let’s learn to use basic APIs and display Toast messages.
Showing your first toast
To show a toast message, we need to import two components from the React Hot Toast library.
import toast, { Toaster } from 'react-hot-toast';- Toaster: This component serves as the wrapper for all displayed messages, although we can place it anywhere it’s preferred to be placed in our root component like root layout in case of Nextjs 14, in app.js, or index.js in the case of Nextjs 12.
- Toast(): A method provided by React Hot Toast to transmit messages to the library, triggering the display of a toast message.
Here I am going to put <Toaster /> components in root layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Toaster } from "react-hot-toast";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<Toaster />
<body className={inter.className}>{children}</body>
</html>
);
}
Now we can call toast() function from any client component to display toast messages here I am calling toast function in page.tsx upon clicking a button.
Note: In Nextjs 14 Make sure to use ‘use client’ on top or use toast() function in component which is already a client component.
'use client';
import toast from 'react-hot-toast'
export default function Home() {
return (
<div className="my-app text-center">
<h1 className="text-4xl">Hello Coders!</h1>
<button onClick={()=>toast("First Toast")} >Show Toast</button>
</div>
);
}
As you can see I am calling toast() function inline upon clicking on the button, it’s that simple to show a toast message with react-hot-toast
Alternatively, you can create an auxiliary function notify and use it to show toast messages
'use client';
import toast from 'react-hot-toast'
export default function Home() {
const notify = ()=>toast("Notified 👍")
return (
<div className="my-app text-center">
<h1 className="text-4xl my-20">Hello Coders!</h1>
<button onClick={notify} >Show Toast</button>
</div>
);
}
Output:
Great you successfully displayed a toast message with the help of react-hot-toast.
Customization
There are lots of customization options available some of them are
1. Types
Multiple types of toast can be displayed including success and error, let’s see these two first.
1. Success
To show a success toast just add .success after toast while calling the toast function
'use client'
import toast from 'react-hot-toast'
export default function Home() {
const notify = ()=>toast("Notified 👍")
return (
<div className="my-app flex flex-col gap-8 text-center">
<h1 className="text-4xl">Hello Coders!</h1>
<button onClick={notify} >Show Toast</button>
<button onClick={()=> toast.success("Task completed 👍")} >success</button>
</div>
);
}
2. Error
Similarly for error messages
<button onClick={()=> toast.error("Task failed😟")} >success</button>3. Custom element as message (JSX)
We can pass a custom JSX element as a message in the toast function as shown below code.
<button onClick={()=> toast.custom(<div className="font-bold p-2 bg-white">Hello Coders😊</div>)} >Custom</button>Output:-
There are more customization options like loading toast and promise you can check them out on official documentation.
Conclusion
As the name says react-hot-toast is pretty hot in the toast market, it can be used for various purposes.
You can explore more APIs like useToaster by following the official documentation.
