66 lines
No EOL
1.5 KiB
Markdown
66 lines
No EOL
1.5 KiB
Markdown
Toast
|
|
|
|
|
|
|
|
https://primereact.org/toast/
|
|
|
|
Here package `primereact` is used so use `npm i primereact` to install it
|
|
|
|
In Toast.jsx
|
|
```jsx
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
import { Toast } from "primereact/toast";
|
|
// import { Button } from "primereact/button";
|
|
|
|
const ToastEle = (props) => {
|
|
const toast = useRef(null);
|
|
|
|
const { errorMessage, errorVisibility, setErrorVisibility } = props;
|
|
|
|
const showError = () => {
|
|
toast.current.show({ severity: "error", detail: errorMessage, life: 3000 });
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (errorVisibility === true) {
|
|
showError();
|
|
setErrorVisibility(false);
|
|
}
|
|
}, [errorVisibility]);
|
|
|
|
return <Toast ref={toast} position="top-left" />;
|
|
};
|
|
|
|
export default ToastEle;
|
|
```
|
|
|
|
In App.jsx
|
|
|
|
```jsx
|
|
import { PrimeReactProvider } from "primereact/api";
|
|
import "primereact/resources/themes/lara-light-indigo/theme.css"; // theme
|
|
// import "primeflex/primeflex.css"; // css utility
|
|
// import "primeicons/primeicons.css";
|
|
import "primereact/resources/primereact.css"; //
|
|
import ToastEle from "./Components/Toast";
|
|
|
|
|
|
function App() {
|
|
|
|
|
|
// for error message at top
|
|
const [errorVisibility, setErrorVisibility] = useState(false);
|
|
const [errorMessage, setErrorMessage] = useState("");
|
|
|
|
return(
|
|
<PrimeReactProvider>
|
|
<ToastEle
|
|
errorVisibility={errorVisibility}
|
|
errorMessage={errorMessage}
|
|
setErrorVisibility={setErrorVisibility}
|
|
/>
|
|
</PrimeReactProvider>
|
|
)
|
|
|
|
``` |