To help you get started, we've collected the most common ways that react-toastify is being used within popular public projects.

MenloOne / block-overflow / src / models / Topics.tsx View on Github

if (ipfsHash) {
                // Failed - unpin it from ipfs.menlo.one
                // this.localStorage.rm(ipfsHash)
                this.remoteStorage.unpin(ipfsHash)
            }

            let msg = e.message
            let timeout = 4000

            if (e.message === "Error: MetaMask Tx Signature: User denied transaction signature.") {
                msg = "You cancelled the MetaMask transaction."
                timeout = 1500
            }

            console.error(e)
            toast(msg, {
                autoClose: timeout,
                toastId: 123
            })
            throw e
        }
    }
}

View more ways to use react-toastify

React-Toastify

🎉 React-Toastify allows you to add notifications to your app with ease.

Installation

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

  import React from 'react';

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

    return (
      <div>
        <button>Notify!</button>
        
      </div>
    );
  }

Documentation

Check the documentation to get you started!

Features

• Easy to set up for real, you can make it work in less than 10sec!
• Super easy to customize
• RTL support
• Swipe to close 👌
• Can choose swipe direction
• Super easy to use an animation of your choice. Works well with animate.css for example
• Can display a react component inside the toast!
• Has onOpen and onClose hooks. Both can access the props passed to the react component rendered inside the toast
• Can remove a toast programmatically
• Define behavior per toast
• Pause toast when the window loses focus 👁
• Fancy progress bar to display the remaining time
• Possibility to update a toast
• You can control the progress bar a la nprogress 😲
• You can limit the number of toast displayed at the same time
• Dark mode 🌒
• Pause timer programmaticaly
• Stacked notifications!
• And much more !

Demo

A demo is worth a thousand words

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! Take a look at the contributing guide.

You can also find me on reactiflux. My pseudo is Fadi.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Release Notes

You can find the release note for the latest release here

You can browse them all here

License

Licensed under MIT