Using React Hot Toast for Notifications

Quickly implement toast notifications in your React app with React Hot Toast for a smooth user experience.

Integrate React Hot Toast for Notifications

yarn add react-hot-toast

Then, import and add the Toaster component at the top of your app:

import { Toaster } from 'react-hot-toast';

function App() {
  return (
    <div>
      <Toaster />
      {/* Other components */}
    </div>
  );
}

Now, you can use toast notifications throughout your application:

// Show a loading toast for uploading
toast.loading('Uploading Resume...');

// Remove the loading toast and show a success notification after successful upload
toast.remove();
toast.success('Resume uploaded successfully');

// Remove loading toast and show an error notification if upload fails
toast.remove();
toast.error(data?.message ?? 'Error uploading resume');

This setup provides a user-friendly way to display notifications, enhancing the overall user experience in your React application.