React-Toastify

React notification made easy

Notification
fkhadra/react-toastifyfkhadra.github.io/react-toastify/introductionreact-toastify

README

React-Toastify

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


React toastify


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

Installation


  1. ```
  2. $ npm install --save react-toastify
  3. $ yarn add react-toastify
  4. ```

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 🌒
- And much more !

The gist


  1. ``` js
  2.   import React from 'react';

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

  10.     return (
  11.       <div>
  12.         <button onClick={notify}>Notify!</button>
  13.         <ToastContainer />
  14.       </div>
  15.     );
  16.   }
  17. ```

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