reactjsemailpromisereact-toastifycustom-toast

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


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


Solution

  • 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,
          },
        }
      );
    };