react-toastify

			Stars	Issues	Version	Updated	Created	Size
	react-toastify		12,152	103	10.0.5	a month ago	7 years ago

React-Toastify

Financial Contributors on Open Collective

🎉 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.