How to Create Toast Notifications in React with React-Toastify

Toast notifications are small pop-up messages that appear on the screen to give feedback to users (like success, error, warning, or info messages). In React, one of the easiest ways to add them is by using the react-toastify library.

Step 1: Install react-toastify

Run this command in your project:

npm install react-toastify

Or with Yarn:

yarn add react-toastify

Step 2: Import and Setup in Your App

In your App.js (or main component):

import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

function App() {
  const notify = () => {
    toast.success("🦄 Wow! Notification works!", {
      position: "top-right",  // top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
      autoClose: 3000,        // 3 seconds
      hideProgressBar: false, 
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      theme: "colored",       // light, dark, colored
    });
  };

  return (
    <div>
      <h2>React Toastify Example 🚀</h2>
      <button onClick={notify}>Show Notification</button>
      
      {/* Toast Container */}
      <ToastContainer />
    </div>
  );
}

export default App;

Step 3: Different Types of Toasts

toast.success("✅ Success message!");
toast.error("❌ Error message!");
toast.warn("⚠️ Warning message!");
toast.info("ℹ️ Info message!");

Step 4: Custom Styling

You can customize with options:

toast("Custom style notification!", {
  position: "bottom-left",
  autoClose: 5000,
  style: { backgroundColor: "#333", color: "#fff" },
});

Output

• Click the button ➝ A toast notification will appear at the specified position.
• Works across all devices (responsive).
• Supports multiple themes (light, dark, colored).

With this, you can now add user-friendly toast alerts to any action in your React app, like login success, API errors, or form submissions.