Back to React Toastify

React-Toastify

README.md

11.0.55.3 KB
Original Source

React-Toastify

šŸŽ‰ React-Toastify allows you to add notifications to your app with ease.

Installation

$ npm install --save react-toastify
$ yarn add react-toastify
jsx
  import React from 'react';

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

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </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]. <a href="https://github.com/fkhadra/react-toastify/graphs/contributors"></a>

Financial Contributors

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

Individuals

<a href="https://opencollective.com/react-toastify"></a>

Organizations

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

<a href="https://opencollective.com/react-toastify/organization/0/website"></a> <a href="https://opencollective.com/react-toastify/organization/1/website"></a> <a href="https://opencollective.com/react-toastify/organization/2/website"></a> <a href="https://opencollective.com/react-toastify/organization/3/website"></a> <a href="https://opencollective.com/react-toastify/organization/4/website"></a> <a href="https://opencollective.com/react-toastify/organization/5/website"></a> <a href="https://opencollective.com/react-toastify/organization/6/website"></a> <a href="https://opencollective.com/react-toastify/organization/7/website"></a> <a href="https://opencollective.com/react-toastify/organization/8/website"></a> <a href="https://opencollective.com/react-toastify/organization/9/website"></a>

Release Notes

You can find the release note for the latest release here

You can browse them all here

License

Licensed under MIT