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