1

the code I'm showing is a react toastify library with onClick button and custom autoclose set time for 1 minute. I want to use the library without using the button but when the page loads can somebody help me how to achieve that?

import React, { useRef, useEffect } from "react";
import * as tf from "@tensorflow/tfjs";
import Webcam from "react-webcam";
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
toast.configure();

function AppMain() { 

  const notify = () => toast("Fetching the Model Do not Close", {
    position: toast.POSITION.TOP_CENTER,
    autoClose: 60000});
 

  const webcamRef = useRef(null);
 

  };

  return (
    <div id="main" className="mainBlock">
      <div className="toasterbutton">
      
       
     <button onClick={notify}>Load Model</button>

     <ToastContainer />
    </div>
        <div id="caption"></div>
            <header style="margin-top:-2.5 rem;" className="container-fluid">
                <Webcam 
                ref={webcamRef}

                audio={false}
                muted={true} 
                style={{
                  position: "absolute",
                  marginLeft: "auto",
                  marginRight: "auto",
                  left: 0,
                  right: 0,
                  textAlign: "center",
                  zindex: 9,
                  width: 640,
                  height: 480,
            
                 }}
          
                 />

               
            </header>  
    </div>
  );
}

export default AppMain;
NoLongerHuman
  • 13
  • 5

1 Answers1

1

Try putting the function call and the function itself in a useEffect that will only run on mount.

function AppMain() { 
  const [show, hide] = useState(true);
  
  useEffect(() => {
    const notify = () => toast("Fetching the Model Do not Close", {
      position: toast.POSITION.TOP_CENTER,
      autoClose: 60000
    });

    notify();
  }, [])

This answer is a good explanation of the useEffect dependency array.

benmneb
  • 1,773
  • 1
  • 15
  • 26
  • Hello thank you for this it work using effect but I only put notify in the use effect and the const notify outside of it thank you l, if possible can you also help me how to appear another toaster notification once the previous toaster is done appearing can I use multiple const in the use effect? Or should I use usestate or if else statement? – NoLongerHuman Jan 05 '22 at 00:45
  • 1
    It's okay now by the way thank you – NoLongerHuman Jan 05 '22 at 16:14
  • Hello benmneb , it worked but it worked only on one time. Is is there any way to put in in another time also – Rajanboy May 09 '22 at 12:19
  • sorry not sure what you mean? – benmneb May 09 '22 at 14:03