Implementing Toast Notifications in React JS | Updated 2024

74

Toast notifications provide timely feedback to users in a non-intrusive way. In React applications, implementing toast notifications can enhance user experience by conveying messages related to errors, confirmations, warnings, or general notifications. This article will guide you through the process of creating and managing toast notifications in a React application using a popular library called react-toastify.

Setting Up Your React Environment

Before adding toast notifications, you need to set up a React project if you haven’t already:

npx create-react-app react-toast-demo
cd react-toast-demo

Step by Step Guide Toast Notifications in React JS

Step 1: Install react-toastify

react-toastify is a flexible and easy-to-use library for adding toast notifications to your React application. Install it via npm:

npm install react-toastify

Step 2: Set Up react-toastify

Incorporate react-toastify into your application by importing the CSS for default styling and initializing the library in your App.js:

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

function App() {
  return (
    <div className="App">
      <ToastContainer />
      {/* The rest of your app component */}
    </div>
  );
}

export default App;

The ToastContainer component is a holder where the toasts will appear. You can customize its position and behavior with props.

Step 3: Creating Toast Notifications

To show a toast notification, you use the toast function. Here’s how you can trigger different types of toasts:

function showToast() {
  toast.success('Success notification!', {
    position: toast.POSITION.TOP_RIGHT
  });
  toast.info('Info notification!', {
    position: toast.POSITION.BOTTOM_LEFT
  });
  toast.warn('Warning notification!', {
    position: toast.POSITION.BOTTOM_RIGHT
  });
  toast.error('Error notification!', {
    position: toast.POSITION.TOP_LEFT
  });
}

Step 4: Add a Button to Trigger Toasts

Integrate a button in your application that when clicked, triggers the toasts:

function App() {
  const notify = () => {
    toast.success('Success notification!', {
      position: toast.POSITION.TOP_RIGHT
    });
    toast.info('Info notification!', {
      position: toast.POSITION.BOTTOM_LEFT
    });
    toast.warn('Warning notification!', {
      position: toast.POSITION.BOTTOM_RIGHT
    });
    toast.error('Error notification!', {
      position: toast.POSITION.TOP_LEFT
    });
  };

  return (
    <div className="App">
      <button onClick={notify}>Show Toasts</button>
      <ToastContainer />
    </div>
  );
}

export default App;

Step 5: Customizing Toasts

react-toastify allows you to customize the appearance and behavior of toasts. You can change duration, position, animation, and even render custom React components inside a toast:

toast('Custom content with a close button', {
  position: "top-center",
  autoClose: 5000,
  hideProgressBar: false,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  progress: undefined,
  closeButton: <CustomCloseButton />,
});

Conclusion

Implementing toast notifications in React with react-toastify is straightforward and enhances the user interface by providing a reliable method for delivering feedback. By following these steps, you can effectively integrate toasts into your React applications and customize them to fit the needs of your project.

Toast Notifications in React JS – FAQs