react toastify code example
Example 1: react toastify does not have design
import React, { Component } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
class App extends Component {
notify = () => toast("Wow so easy !");
render(){
return (
<div>
<button onClick={this.notify}>Notify !</button>
<ToastContainer />
</div>
);
}
}
Example 2: react toastify
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>
);
}
Example 3: react toast
import { ToastProvider } from 'react-toast-notifications';
import { Snack } from '../snackbar';
const App = () => (
<ToastProvider
autoDismiss
autoDismissTimeout={6000}
components={{ Toast: Snack }}
placement="bottom-center"
appearance: 'success',
autoDismiss: true,
>
...
</ToastProvider>
);
Example 4: react toastify
yarn add react-toastify
Example 5: react toastr
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">