React Toasting Message. Step by Step from Installation.

 In this tutorial, we will learn the uses of React Toasting messages in the React application. Given below is the total process to implement and use react toast.

Steps are - 

1. Install React Toast Library
2. Create a common component to use Toast everywhere.
3. Finally use a toast message

Step 1. Install React Toast Library: First we must install the React Toast library in the React application. It is straightforward. Just required to run a single command.

Command - 

npm i react-toastify

Installation

Installation completed. Check in package.json file. 

React Toastify added successfully.

Step 2. Create a common component: It is optional. Just created a common function with all message type to use from everywhere in the project. So that we can call this common function with our message and type of message.

Types of Message - success, error, info and warning

Step 3. Uses of Common Toast function: All processes are done. Now is the time to use this Toast function in the required places of the project. It is needed to import common Toast component.

Used in a callback funtion

Finally output as success message.

    Done 😃

 

Code 👇

Common component

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

};

Use

await controller.saveMenuCategory(updatedModel,

            (data) => {Toast('Successfully Updated.','success')},

            (errorMessage) => { Toast("Update Failed.','error')});