Blood Bank Management System Project with Source Code | How to Use React-Toastify for Notifications in React | Express, Sequelize | Part 8

Learn how to create a fully functional Blood Bank Management System using modern technologies. This step-by-step guide is perfect for both beginners and experienced developers, offering source code and practical insights. With a focus on React JS, Node JS, and Bootstrap, you'll develop an efficient system for managing blood donations, inventory, and donors. Start building your blood bank management system today!

Technologies Used

  • React JS
  • Node JS
  • Bootstrap
  • HTML & CSS

Basic Requirement

  1. Node JS
  2. Editor
  3. Web browser

How to Add Toast Notifications Using React-Toastify | Part 1

In this tutorial, we will learn how to add toast notifications in a React application using React-Toastify. Toast notifications are useful for showing quick messages to the user, like success, error, or informational messages.

Prerequisites

Before we begin, make sure you have the following installed:

  • Node.js
  • NPM (Node Package Manager)
  • A code editor (e.g., Visual Studio Code)
  • Basic knowledge of React

Step 1: Install React-Toastify

Start by installing the React-Toastify library in your React project. Open your terminal and run the following command: 

npm install react-toastify

Step 2: Import and Configure ToastContainer

In your main App component, import the ToastContainer and set it up to display toast notifications across your app. 

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

function App() {
  return (
    <div>
      <h1>Your App</h1>
      <ToastContainer position="top-right" autoClose={3000} />
    </div>
  );
}

export default App;

Step 3: Triggering Toast Notifications

Now let’s add different types of toast notifications. Import the toast function from React-Toastify and use it to display messages. 

import React from 'react';
import { toast } from 'react-toastify';

function Notifications() {
  const showSuccessToast = () => {
    toast.success("Success! Your action was successful.");
  };

  const showErrorToast = () => {
    toast.error("Error! Something went wrong.");
  };

  const showInfoToast = () => {
    toast.info("Info! Here is some information.");
  };

  return (
    <div>
        <button onClick={showSuccessToast}>Show Success</button>
        <button onClick={showErrorToast}>Show Error</button>
        <button onClick={showInfoToast}>Show Info</button>
    </div>
  );
}

export default Notifications;

Step 4: Customize Toast Settings

React-Toastify offers customization options for toasts. For example, you can adjust the position, auto-close duration, and add close buttons. 

<ToastContainer
  position="bottom-left"
  autoClose={5000}
  hideProgressBar
  closeOnClick
  pauseOnHover
  draggable
/>

Step 5: Testing Your Toasts

Run your application and test the buttons to see toast notifications in action. To start the application, use the following command in your terminal: 

npm start

Tutorial Topics