JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    React Toastify

    React notification made easy 🚀 !
    Filed under 

    • 🔾80%Overall
    • 12,107
    • 3.9 days
    • 🕩661
    • 👥8

    React-Toastify

    Financial Contributors on Open Collective React-toastify CI npm npm NPM Coveralls github

    React toastify

    stacked

    🎉 React-Toastify allows you to add notifications to your app with ease. No more nonsense!

    Installation

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

    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 !

    The gist

      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>
        );
      }
    

    Demo

    A demo is worth a thousand words

    Documentation

    Check the documentation to get you started!

    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

    Show All