🥳 Learning ReactJS + Vite + TS + AIOHA - Day 7 – Show a Toast Message! 🥨

🚀 Quick Summary

Learn how to display error messages like a pro with toast notifications in React and daisyUI! Customizable, easy, fun! 🚨🍞

👋 Hello Hive Legends!

Hope everyone's code is bug-free, and coffee is strong! ☕🐝
I’m back with my ReactJS learning journey, powered by Hive Blockchain.
This time, we’re getting crispy with toast messages—no burnt edges, I promise! 😂

📜 ReactJS Journey So Far

Missed my earlier posts? No worries! Here’s the binge-list:

• 📚 Day One: Fresh React app + AIOHA integration!
• 🧭 Day Two: Routing drama & rebellious NavBar 😤
• 🛠️ Day Three: Fixed Layouts, Routing & AIOHA 💥
• 🧠 Day Four: useState, useEffect, and .env headaches 😅
• 🧹 Day Five: Path Aliases to clean up relative path spaghetti 🍝
• 📡 Day Six: Calling APIs & Creating Context Providers

🥳 Today’s Recipe: Toasting Errors Like a Pro!

Ever wanted to yell “ERROR!” at your users but in a friendly way? Enter: toast messages! 🍞🔥

Let’s learn how to show an error using a daisyUI toast, and nothing else!
Sit back and snack on these steps! 😋

🔧 Step 1: Make the Toast Component

Create this in your React app:

src/components/
├── Toast.tsx

🏗️ Step 2: Define Toast Props

Props are super important—like ingredients in your toast!
Here’s what you’ll need:

import React, { useEffect } from "react";

type ToastProps = {
  message: string;
  show: boolean;
  setShow: React.Dispatch<React.SetStateAction<boolean>>;
};

🥪 Step 3: Write the Toast Component

Your bread and butter code:

const Toast: React.FC<ToastProps> = ({ message, show, setShow }) => {
  useEffect(() => {}, [show, setShow]);

  function showToast() {}
  function noToast() {
    return <></>;
  }

  return show ? showToast() : noToast();
};

👀 Step 4: Get the DaisyUI Snippet

Copy the error toast code snippet from DaisyUI!
Here’s how it looks:

Now click on JSX and copy it:

🥂 Step 5: Update showToast() Function

Display your error toast at the bottom right, always:

function showToast() {
  return (
    <div className="fixed bottom-4 right-4 z-50 min-w-[200px] transition-opacity duration-300">
      <div role="alert" className="alert alert-error shadow-lg px-4 py-2 rounded-md">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-6 w-6 shrink-0 stroke-current"
          fill="none"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        <span>{message}</span>
      </div>
    </div>
  );
}

⏱️ Step 6: Hide Toast Automatically

No one likes a toast that won’t leave. Use useEffect to hide after 1.5 seconds:

useEffect(() => {
  if (show) {
    const timer = setTimeout(() => {
      setShow(false);
    }, 1500); // 1.5 seconds!
    return () => clearTimeout(timer);
  }
}, [show, setShow]);

🤩 Your Finished Toast.tsx:

Check it all out here:
https://gist.github.com/sag333ar/961a124d77d66551b87d75bfa59e82a7

🏄 Using the Toast Message in Your App

Here’s how to use your new Toast:

import Toast from "@/components/Toast";

const HiveUserAvatarButton = () => {
  const [showToast, setShowToast] = useState<boolean>(true);
  const [errorMessage, setErrorMessage] = useState<string>("show an error 1 time");

  function performLogin(result: LoginResult) {
    if (result.success) {
      setIsLoading(true);
    } else {
      setIsLoading(false);
      setErrorMessage(result.error || 'Something went wrong'); // 👈
      setShowToast(true); // 👈 Show Toast
    }
  }

  return (
    <>
      {/* your rest of the code */}
      <Toast message={errorMessage} show={showToast} setShow={setShowToast} />
    </>
  );
}

🎯 Closing Toast: What’s Next?

With this, your app can shout its errors (gently)! 🗣️

Real plot twist: My co-dev discovered Sonner—it’s even more magical for toasts.
😭 Mine was pretty cool, but Sonner is next-level!

Try both, and see which one you love!

💚 Thank You, Amazing Hive Fam!

• More power to Hive Community Members! 🚀
• More power to Hive Blockchain! 💪🏻

See you all soon—may your code never fail silently! 😼

📝 Final Note

• I asked ChatGPT/AI to help optimize this post to make it more readable and viewer-friendly.
• Here is the link where you can find both original content & improvements made by AI
• https://www.perplexity.ai/search/15ab5a4e-8b95-4c10-bef1-11cb135fa05a

🚀 My Contributions to ♦️ Hive Ecosystem

🙌 Support Back

❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak