- Forums
- react
- How To Implement Toast In A React Application Using React-toastify
Follow these steps to get started with react-toastify in a React Application. [5305], Last Updated: Mon Jun 24, 2024
edw
Sun Apr 07, 2024
0 Comments
145 Visits
what is a toast? Toasts are show messages or popup messages you can show your users to alert them of any information related to their expirience withint the UI.
source: /f/apachefriends/xampp/htdocs/webune/quiz/frontend/reactV1
To implement toast in a React Component, use this code examle:
QuizIndex.jsx:
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
....
const notify = (type = 'default', msg) => toast(msg, { type });
JSX:
return (
<>
<ToastContainer
position="top-center"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
pauseOnHover
theme="colored" />
</>
)
Usage:
notify('error', "Error #14 - There was a problem with your request to the server.");