Harshit Saini
Harshit Saini's Blog

Follow

Harshit Saini's Blog

Follow
Notifications in react : react-toastify

Notifications in react : react-toastify

Harshit Saini's photo
Harshit Saini
·Mar 31, 2021·

1 min read

image.png

This is not like pop notifications. This is more like a customized alert notification.

Click here to visit the official GitHub page of this project.


How to use react-toastify

Step 1: Install it

npm i react-toastify

Step 2: Import it in app.js file

  import React from 'react';

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

  function App(){

    return (
      <div>
        <ToastContainer />
      </div>
    );
  }

Import ToastContaner from react-toastify and the CSS file form react-toastify/dist/
Then just use the ToastContainer container.
This is how you configure react-toastify.

Step 3: Use it

Just import toast from react-toastify in the file where you want to use it

import { toast } from 'react-toastify'

if(error) toast.alert("an error has occured ")

There are different kinds of toast containers such as

  1. alert
  2. success
  3. info
  4. warning

You can read the full documentation here

NOTE: you can also customize how the popup will look like. Now you can just read the documentation to know all kind of things that you can do with this.

 
Share this