React-Toaster Step by Step Installation and make a common function to use to all component.

A React Toaster generally refers to a notification system built using React, a popular JavaScript library for creating user interfaces. A toaster notification (also known as a toast or snack bar) is a short message displayed on the screen to provide feedback or information to the user, usually in a non-intrusive way.

Here are the steps to install React-Toaster in a React project. And create a common function to use from all other components.

Installation

Step 1: Run the below command in the terminal of your project. This will add the package to your project's dependencies.

npm i react-toastify

Installation Done.

Step 2: Verify in your package.json file.

Installation Completed. Now use it by following below.

Use of Toaster

Step 1: Write a common function to use in other components.

Step 2: Import the above Toast file into the other component where you need to use Toast. And use Toast function to show your message.

Here are two parameters in the Toast function. The first one is your Message and the second one is the Type of showing your message.

Step 3: Finally check the output in your browser.

Code 👇

Toast.js

import { toast } from "react-toastify";

export const Toast = (message, type) => {

        switch (type)

            { case 'success': toast.success(message);

                break;

              case 'error': toast.error(message);

                break;

              case 'info': toast.info(message);

                break;

              case 'warning': toast.warning(message);

                break;

            default: break; }

}  

export default {

    Toast

};

YourComponent.js

import {Toast} from '../Toast';

Toast('Successfully Updated.','success');

Toast('Successfully Deleted.','error');

Toast('This is your information','info');

Toast('This is your warning','warning');