Create Toaster Messages in React

 

In this tutorial you are going to learn how to create toaster messages in React. Now a days we are using toaster messages in many of our applications.

Eg: success toast is used after successful login, error toast is used for displaying errors while api calls etc.

Step 1: Install npm package :  npm install react-toastify

Step-2 : Code in Js File:

import React from "react";

import {ToastContainer,toast, Zoom} from 'react-toastify';

import 'react-toastify/dist/ReactToastify.css';

export default function App() {

  function success(){

    toast.success('success')

  }

  function Error(){

    toast.error('Error')

  }

  function Info(){

    toast.info('Info')

  }

  function Warning(){

    toast.warn('Warning')

  }

  return (

    <div>

      <button onClick={success}>Success</button>

      <button onClick={Error}>Error</button>

      <button onClick={Info}>Info</button>

      <button onClick={Warning}>Warning</button>

      <ToastContainer draggable={false} transition={Zoom} autoClose={8000}/>

  </div>

  );

}

If you like this tutorial then please subscribe to our youtube channel (Youtube channel link)where you can get lot of interesting tutorials, integrations etc of react.