Skip to content

Latest commit

 

History

History
153 lines (108 loc) · 6.78 KB

README.md

File metadata and controls

153 lines (108 loc) · 6.78 KB
Raw

material-react-toastify

You can try the demo here.

v1 is out 🎉 🎉

This is a fork from react-toastify v6.1.0, 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 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 🌒
  • 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"); // or toast.default()
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].

License

Licensed under MIT