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

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

• 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 !

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

Toasts can be ordered by using the toast property. The value can be any number. The default value is 0.

// Assuming the Toast Container is at bottom-right
toast('Hi');

// This toast will appear above the first toast because its order is higher that default of 0.
toast('I am first.', {
  order: 1
});

// This toast will appear at the top because its order is higher than all.
toast('I am the new first.', {
  order: 2
});

/*
 * This toast is created third and it will appear at the bottom of the Toast Container,
 * because it's value is less than other toasts.
 */
toast('I will be at bottom', {
  order: -1
});

// This toast will appear above the previous toast but below all other toasts because the default value of toast is 0
toast('Hello');

A demo is worth a thousand words

Check the documentation to get you started!

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.

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

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

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

You can find the release note for the latest release here

You can browse them all here

Licensed under MIT