Use react-hot-toast with Promise & Axios

Promise

A promise is an object that may produce a single value some time in the future : either a resolved value, or a reason that it's not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending

👉 A promise can states

✅ fulfilled - The action relating to the promise succeeded
❌ rejected - The action relating to the promise failed
⚪ pending - Hasn't fulfilled or rejected yet

Axios

Axios is a Javascript library used to make HTTP requests from node. js or XMLHttpRequests from the browser and it supports the Promise API that is native to JS ES6. It can be used intercept HTTP requests and responses and enables client-side protection against XSRF. It also has the ability to cancel requests

react-hot-toast

Smoking hot Notifications for React.
Lightweight, customizable and beautiful by default.

React Code

import toast, { Toaster } from "react-hot-toast";
import { useEffect } from "react";
import axios from 'axios'
export default function App() {
  const fetchData = async () => {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    console.log({ response });
    return response;
  };

  useEffect(() => {
   const callFunction= fetchData();
   toast.promise(callFunction, {
    loading: "Process",
    error: "error occurs in data",
    success: "get data successfully...."
  });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Toaster />
    </div>
  );
}

👏 Thanks for reading