material-react-toastify

$3

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

!npm
!npm
!NPM


src="https://user-images.githubusercontent.com/35040146/100596753-851b5e00-3322-11eb-9073-1a50e5adcb53.png"
/>

🎉 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

`jsx
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 (


$3

src="https://user-images.githubusercontent.com/35040146/100720655-54036200-33e4-11eb-9b08-357077675ff2.png"
/>

`js
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

$3

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

[Find all the contributors]

License

Licensed under MIT