How can "toast" be initialized without launch it?

[rojasraul]

Hi everybody,

I need your help. I want to initialized a Toast instance with React.userRef, but without launch it, because I want to use that Ref Id to update any Toast type, and I don't know which Toast type (info, error, success) happens first.

For example:

const alertToast = React.useRef(null)
alertToast.current = toast('')

  const infoAlert = (message) =>
    toast.update(alertToast.current, {
      render: message,
      type: toast.TYPE.INFO,
      autoClose: 1500,
    })
  const successAlert = () =>
    toast.update(alertToast.current, {
      render: 'Success!!',
      type: toast.TYPE.SUCCESS,
      autoClose: 2500,
    })
  const errorAlert = (code, message) =>
    toast.update(alertToast.current, {
      render: `Error with code: ${code} and message: ${message}`,
      type: toast.TYPE.ERROR,
      autoClose: false,
    })

But the line alertToast.current = toast('') always launch the Toast

Thanks for your help.

[AbhayaShankar]

What you can do is create 3 corresponding toasts for all pending, success and error state

  const pendingNotif = (text) => toast(text);
  const errorNotif = (text) => toast.error(text);
  const successNotif = (text) => toast.success(text);

And depending upon the current status, you can display them accordingly

if (currStatus === "pending") {
    pendingNotif("Your data is being submitted!");
  }

  if (currStatus === "success") {
    successNotif("Your message has been sent successfully!");
  }

  if (currStatus === "error") {
    errorNotif(reqError);
  }

Toast container use case:

<ToastContainer
        style={{ fontSize: 15, width: 400 }}
        position="top-center"
        autoClose={3000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="dark"
      />

Do let me know if updating to this code snippet solves your code... ✨🙂