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

sagarkothari88(77)

Published in

HiveDevs

Words

517

Reading

3 min

Listen

Play

🚀 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

sample image for preview of a toast message

🥳 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:

Go to DaisyUI

Now click on JSX and copy it:

copy code snippet

🥂 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

Contribution	To	Hive	Ecosystem
Hive Witness Node	Hive API Node (in progress)	3Speak Video Encoder Node Operator (highest number of nodes)	3Speak Mobile App Developer
3Speak Podcast App Developer	3Speak Shorts App Developer	3Speak Support & Maintenance Team	Distriator Developer
CheckinWithXYZ	Hive Inbox	HiFind	Hive Donate App
Contributed to HiveAuth Mobile App	Ecency ↔ 3Speak Integration	Ecency ↔ InLeo Integration	Ecency ↔ Actifit Integration
Hive Stats App	Vote for Witness App	HiveFlutterKit	New 3Speak App