material-react-toastify

material-react-toastify

You can try the demo here.

🎉 🎉 now updated to v10.0.5 from the original repo 🎉 🎉

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

🎉 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 Material.io design spec-sheet. You can check it out here

Installation

$ npm install --save material-react-toastify
$ yarn add material-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 'material-react-toastify';
import 'material-react-toastify/dist/ReactToastify.css';

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

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

Example:

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

Demo

A demo is worth a thousand words

Documentation

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.

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

Contributors

Code Contributors

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

License

Licensed under MIT