How can i use React toastify (Promise) toast, with email js

Question

I am currently using success and error toast with email js but i want to use toastify promise with my custom loader here is my current code

import emailjs from "@emailjs/browser";
import { toast } from 'react-toastify';

export const sendEmail = ({ service_id, templete_id, values, theme, setIsloading, pubkey }) => {
  emailjs.send(service_id, templete_id, values, pubkey).then(
    () => {
        toast.success("Application submitted !", {theme})
        setIsloading(false);
    },
    (error) => {
      console.error(error);
      toast.error("Something went wrong.", {theme});
      setIsloading(false);

    }
  );
};

const resolveWithSomeData = new Promise(resolve => setTimeout(() => resolve("world"), 3000));
toast.promise(
    resolveWithSomeData,
    {
      pending: {
        render(){
          return "I'm loading"
        },
        icon: false,
      },
      success: {
        render({data}){
          return `Hello ${data}`
        },
        // other options
        icon: "",
      },
      error: {
        render({data}){
          // When the promise reject, data will contains the error
          return <MyErrorComponent message={data.message} />
        }
      }
    }
)

i found this but it couldnt resolving my issue I want a custom loader on pending status

Uzair Hasan Khan · Accepted Answer · 2023-08-11T17:02:03.977

you can use the react-toastify with the custom loader like this

import emailjs from "@emailjs/browser";
import { toast } from "react-toastify";
import Loader from "../../components/Loader/Loader";

export const sendEmail = ({
  service_id,
  templete_id,
  values,
  theme,
  setIsloading,
  pubkey
}) => {
  toast.promise(
    emailjs.send(service_id, templete_id, values, pubkey),
    // Here you can add the different massage/icons based on pending, success and error state
    {
      pending: {
        render() {
          return "Resolving promise";
        },
        theme,
     // Here you can add your custom loader
        icon: <Loader />,
      },
      success: {
        render() {
          setIsloading(false);
          return "Promise resolve";
        },
     // When this is true you will see the default icon of react-toastify and you can also add a custom icon like the above <Loader />. 
        icon: true,
      },
      error: {
        render() {
          setIsloading(false);
          return "Something went wrong.";
        },
        icon: true,
      },
    }
  );
};

How can i use React toastify (Promise) toast, with email js

1 Answers1