React-Toastify

In an application a Toast is like a floating container that can be displayed anywhere over the content to show some messages like notification. These messages are displayed to provide important information to users. Toastify is a package that can be installed to create toasts in your application. It is an easy way to display notifications. It can be customized according to your preferences. Many configuration options are available to make it possible. 

To install toastify using npm or yarn type the below lines of command.

$ npm install --save react-toastify
$ yarn add react-toastify

The following are some features of Toastify.

It is easy to install.

It supports RTL.

Swipe to close

You can choose the swipe direction.

Easy to customize.

You can choose an animation and use it effortlessly.

You can display the react component inside the toast.

The react component rendered inside the toast can be accessed using onOpen and onClose hooks.

You can remove a toast programmatically.

Its behavior can be defined.

You can pause a toast.

Progress bar.

Can be updated.

There is a dark mode option.

You can set a limit to the maximum number of toast displayed at a time.



Here is how to use Toast in your application.

 import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App(){
    const notify = () => toast("Wow so easy!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </div>
    );
  }