xxxxxxxxxx
$ npm install --save react-toastify
$ yarn add react-toastify
xxxxxxxxxx
import React from 'react'
import './App.css'
import { toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
toast.configure()
function App () {
const notify = () => {
toast('Default!', { position: toast.POSITION.TOP_LEFT })
toast.success('Success!', {
position: toast.POSITION.TOP_CENTER,
autoClose: 8000
})
toast.info('Info!', {
position: toast.POSITION.TOP_RIGHT,
autoClose: false
})
toast.warn({
position: toast.POSITION.BOTTOM_LEFT
})
toast.error('Error!', { position: toast.POSITION.BOTTOM_CENTER })
toast('Wow so easy !', { position: toast.POSITION.BOTTOM_RIGHT })
}
return (
<div className='App'>
<button onClick={notify}>Notify !</button>
</div>
)
}
export default App
xxxxxxxxxx
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>
);
}
xxxxxxxxxx
//npm i react-toastify
//App.jsx
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
function App() {
return (
<>
.
<ToastContainer />
</>
)
}
//Now we can use react-tostify anywhere in any page.
//SignIn.jsx
import { toast } from "react-toastify";
const SignIn = ()=> {
const onSubmit = async (e) => {
try {
.
.
} catch (error) {
toast.error("Bad User Credentials");
}
};
}
Demo code.
xxxxxxxxxx
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>
);
}
xxxxxxxxxx
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
To install "react-toastify", run the following command.
xxxxxxxxxx
$ npm install --save react-toastify
$ yarn add react-toastify