initial

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

@@ -0,0 +1,66 @@
+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;
+```
+&nbsp;
+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>
+	)
+
+```