joplin-notes/joplin notion extension/Web Development/React/Snippets/Toast.md

Toast

https://primereact.org/toast/

Here package primereact is used so use npm i primereact to install it

In Toast.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

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>
	)