TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published


You can try the demo here.

🎉 🎉 now updated to v9.1.1 from the original repo 🎉 🎉

This is a fork from react-toastify v9.1.1, all its props and documentation will work with this module too.

npm npm NPM Coveralls github downloads

🎉 material-react-toastify allows you to add notification snackbars to your app with ease. No need to maintain multiple states anymore!

This component has been made in compliance with design spec-sheet. You can check it out here


$ npm install --save material-react-toastify
$ yarn add material-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 !

The gist

import React from 'react';

import { ToastContainer, toast } from 'material-react-toastify';
import 'material-react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => toast('Wow so easy!');

  return (
      <button onClick={notify}>Notify!</button>
      <ToastContainer />


toast("It's that easy");
toast.success('to create');
toast.error('different types');
toast.dark('of notifications.');
toast.warning('You just need to');'execute one of these functions');


A demo is worth a thousand words


Here's the documentation to get you started !

**I edited the original documentation to change it according to material-react-toastify

You can also check-out the original react-toastify documentation here for further reference.


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


Code Contributors

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


Licensed under MIT


npm i material-react-toastify

DownloadsWeekly Downloads






Unpacked Size

400 kB

Total Files


Last publish


  • shivanshbtw