1import React from 'react';
2
3import { ToastContainer, toast } from 'react-toastify';
4import 'react-toastify/dist/ReactToastify.css';
5
6function App(){
7 const notify = () => toast("Wow so easy!");
8
9 return (
10 <div>
11 <button onClick={notify}>Notify!</button>
12<ToastContainer />
13 </div>
14);
15}
1 import React, { Component } from 'react';
2 import { ToastContainer, toast } from 'react-toastify';
3 import 'react-toastify/dist/ReactToastify.css';
4 // minified version is also included
5 // import 'react-toastify/dist/ReactToastify.min.css';
6
7 class App extends Component {
8 notify = () => toast("Wow so easy !");
9
10 render(){
11 return (
12 <div>
13 <button onClick={this.notify}>Notify !</button>
14 <ToastContainer />
15 </div>
16 );
17 }
18 }
19
1import { ToastProvider } from 'react-toast-notifications';
2import { Snack } from '../snackbar';
3
4const App = () => (
5 <ToastProvider
6 autoDismiss
7 autoDismissTimeout={6000}
8 components={{ Toast: Snack }}
9 placement="bottom-center"
10 appearance: 'success',
11 autoDismiss: true,
12 >
13 ...
14 </ToastProvider>
15);
16
1 import React from 'react';
2
3 import { ToastContainer, toast } from 'react-toastify';
4 import 'react-toastify/dist/ReactToastify.css';
5
6 function App(){
7 const notify = () => toast("Wow so easy!");
8
9 return (
10 <div>
11 <button onClick={notify}>Notify!</button>
12 <ToastContainer />
13 </div>
14 );
15 }
1import { ToastContainer } from "react-toastify";
2import 'react-toastify/dist/ReactToastify.css';
3
4use in react like : (<ToastContainer/>)