React toastify

#react #html #javascript #webdev

Hello Guys today i am going to show you a very beautiful react-library called "react-toastify"
This library is used to create pop-up notifiction with many attributes and can be used conditionally in react.
Lets get started...

Installation -

 npm install --save react-toastify

Documentation -
https://fkhadra.github.io/react-toastify/introduction/

It is very cool notification library which you can use in almost every project and it is very to setup and add to your project.

Usage -

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

  function Example() {
    const notify = () => {
      toast("Default Notification !");

      toast.success("Success Notification !", {
        position: toast.POSITION.TOP_CENTER
      });

      toast.error("Error Notification !", {
        position: toast.POSITION.TOP_LEFT
      });

      toast.warn("Warning Notification !", {
        position: toast.POSITION.BOTTOM_LEFT
      });

      toast.info("Info Notification !", {
        position: toast.POSITION.BOTTOM_CENTER
      });

      toast("Custom Style Notification with css class!", {
        position: toast.POSITION.BOTTOM_RIGHT,
        className: 'foo-bar'
      });
    };

    return <button onClick={notify}>Notify</button>;
  }

When you click the button it will popup all the notifications inside notify function, you can see there are multiply notification toast's like error,success,warn,default,these are inbuilt styles provided so you can use according to the condition like if you want to give a warning to the user , you can use toast.warn() method.
The position attribute is used to position the notification on the screen,toast.POSITION.BOTTOM_RIGHT -> it means the notification toast will popup at bottom right of the screen.
For complete info read the documentation from the link i have provided above.

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj