Add Toast Notifications in React

Adding toast notifications gives instant feedback to users after actions like form submits, logins, or API responses. react-hot-toast is a tiny, fast, and developer-friendly library that makes this easy.

Watch the Tutorial

Why use toasts?

Toasts are non-blocking notifications that appear briefly and then disappear. They are perfect for showing success messages, errors, and short tips without disrupting the user's flow.

Step 1 — Install the library

Install react-hot-toast in your project:

npm install react-hot-toast

This command adds the package and its small runtime to your node_modules.

Step 2 — Set up the Toaster

Add the <Toaster /> at the root of your application so toasts can be shown from anywhere. Typically this is in App.jsx, App.tsx, or your layout file in Next.js.

App.jsx

// App.jsx
import React from "react";
import { Toaster } from "react-hot-toast";

export default function App({ children }) {
return (
  <>
    {children}
    <Toaster />
  </>
);
}

One <Toaster /> instance is enough — it manages a portal and renders notifications when toast() is called.

Step 3 — Trigger toasts

Import toast and call it where you want to show a notification. Use different helpers for types of messages.

triggerToasts.js

import { toast } from "react-hot-toast";

// Success
function onSave() {
toast.success("Saved successfully! 🎉");
}

// Error
function onError() {
toast.error("Something went wrong.");
}

// Neutral / info
function onInfo() {
toast("Here is a tip.");
}

Best practice: call toasts after a confirmed result (API response resolved, validation passed) to avoid misleading users.

Step 4 — Customize appearance and behavior (optional)

react-hot-toast accepts options for icon, duration, and style. You can pass an options object as a second argument.

customToast.js

toast("Custom Message 💡", {
icon: "🔥",
duration: 4000,
style: { background: "#333", color: "#fff" },
});

// Custom success toast
toast.success("Saved!", {
icon: "✅",
});

Tip: create a small wrapper function to keep consistent icons and styles across your app.

Example: Demo component (Next.js / React)

ToastDemo.jsx

import React from "react";
import { Toaster, toast } from "react-hot-toast";

export default function ToastDemo() {
return (
  <div>
    <Toaster />
    <button onClick={() => toast.success("Nice! 🎉")}>Show Success</button>
    <button onClick={() => toast.error("Oops, error")}>Show Error</button>
    <button onClick={() => toast("Just an info")}>Show Info</button>
  </div>
);
}

Quick checklist

Install with:
npm install react-hot-toast
Add <Toaster /> in root component
Use toast.success() / toast.error() / toast() to trigger
Customize via options if needed

Wrap up

That's it — toast notifications are now available in your app. They provide instant, unobtrusive feedback and are easy to configure. If you want, I can add a demo page in this repo or provide TypeScript versions of the snippets.