How to Create Toast Notification in React Easily

To create a toast notification in React, use a library like react-toastify which provides easy-to-use components and hooks. Install it with npm install react-toastify, then import and call toast() to show notifications anywhere in your app.

Syntax

Use the toast() function from react-toastify to show a notification. Wrap your app with ToastContainer to display toasts. You can customize position, duration, and style.

• toast('message'): Shows a toast with the given message.
• <ToastContainer />: Component that renders toast notifications.

jsx

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

function App() {
  const notify = () => toast('Hello, this is a toast!');

  return (
    <>
      <button onClick={notify}>Show Toast</button>
      <ToastContainer />
    </>
  );
}

export default App;

Output

A button labeled 'Show Toast' appears. Clicking it shows a small popup message 'Hello, this is a toast!' at the bottom-right corner.

Example

This example shows a React component with a button that triggers a toast notification. It uses react-toastify for easy setup and styling.

jsx

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

export default function ToastExample() {
  const notify = () => {
    toast.success('Success! Your action was completed.', {
      position: 'top-center',
      autoClose: 3000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });
  };

  return (
    <div style={{ padding: '2rem' }}>
      <button onClick={notify} aria-label="Show success toast">Show Success Toast</button>
      <ToastContainer />
    </div>
  );
}

Output

A button labeled 'Show Success Toast' is visible. Clicking it shows a green success toast message at the top center that disappears after 3 seconds.

Common Pitfalls

Common mistakes when creating toast notifications in React include:

• Not including <ToastContainer /> in your component tree, so toasts never appear.
• Calling toast() outside React event handlers or lifecycle, causing unexpected behavior.
• Forgetting to import the CSS from react-toastify/dist/ReactToastify.css, which breaks styling.
• Using multiple ToastContainer components unnecessarily, which can cause duplicate toasts.

jsx

/* Wrong: Missing ToastContainer */
import { toast } from 'react-toastify';

function App() {
  const notify = () => toast('Hello');
  return <button onClick={notify}>Notify</button>;
}

/* Right: Include ToastContainer */
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => toast('Hello');
  return (
    <>
      <button onClick={notify}>Notify</button>
      <ToastContainer />
    </>
  );
}

Quick Reference

Here is a quick summary to create toast notifications in React:

Step	Description	Code Example
1	Install react-toastify	npm install react-toastify
2	Import ToastContainer and toast	import { ToastContainer, toast } from 'react-toastify';
3	Add ToastContainer in your app
4	Trigger toast with toast('message')	toast('Hello!')
5	Customize with options	toast.success('Done', { position: 'top-right' })

Key Takeaways

Always include in your React app to display toasts.

Use the toast() function to trigger notifications anywhere in your components.

Import react-toastify CSS for proper toast styling.

Customize toast position, duration, and type using options in toast().

Avoid multiple ToastContainer components to prevent duplicate notifications.