🚀 **Day 9 – Toasts, Laughs & Custom Magic!** 🍞✨

Hey Hive Community Members! 🐝

Welcome back to my wild ReactJS learning ride 🎢 — and guess what? We’re already on Day 9! If you've missed previous episodes, don't worry. Grab some popcorn 🍿 and catch up with the epic saga below:

📖 ReactJS Journey So Far

• 📚 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: Create Context Provider & call API
• 🍞 Day Seven: Show a toast message
• 🔐 Day Eight: Login with AIOHA & Distriator & LocalStorage magic

🥳 Today's Adventure: Custom Toast Component

As highlighted in earlier posts, there’s a super cool way to show toast messages with the 'sonner' library (link)... But! I created my own Toast component. It's my first React baby—how could I abandon it? 🤣

So, today we jazz things up and show how to customize our own toast messages and style them like a pro. 🧑‍🎨

🖼️ Toasty Visuals

💡 Define Custom Enums for Toasts

// ToastType as a string enum
export enum ToastType {
  Error = "error",
  Warning = "warning",
  Info = "info",
  Success = "success"
}

// ToastStyle as a string enum
export enum ToastStyle {
  Regular = "regular",
  Soft = "soft",
  Outline = "outline",
  Dash = "dash"
}

Because when life hands you errors, turn them into enums! 😂

🎨 SVG Icons for Every Occasion

  function errorPath() {
    return <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" />;
  }

  function warningPath() {
    return <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
  }

  function successPath() {
    return <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />;
  }

  function infoPath() {
    return <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />;
  }

Why pick one mood when you can have four? 😉

⚙️ Toast Props Ready for Showbiz

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

const Toast: React.FC<ToastProps> = ({ message, type, style, show, setShow }) => {

Toast gets picky: “I want my message! And my style! And my own show!”

🖌️ SVG Rendering, Like a Boss

<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()}
</svg>

Unleashing the right icon for the right moment⏳

🧩 Path Selector – Icon Power!

function path() {
  switch (type) {
    case ToastType.Error: return errorPath();
    case ToastType.Info: return infoPath();
    case ToastType.Warning: return warningPath();
    case ToastType.Success: return successPath();
    default: return successPath();
  }
}

🌈 Dynamic Class Value: Automatic Styling!

<div role="alert" className={`alert ${classValue()} shadow-lg px-4 py-2 rounded-md`}>

function classValue() {
  switch (type) {
    case ToastType.Error: return "alert-error";
    case ToastType.Info: return "alert-info";
    case ToastType.Warning: return "alert-warning";
    case ToastType.Success: return "alert-success";
    default: return "alert-success";
  }
}

🎩 Supercharged Toast Display Styles

function toastStyle() {
  switch (style) {
    case ToastStyle.Dash: return "alert-dash";
    case ToastStyle.Soft: return "alert-soft";
    case ToastStyle.Outline: return "alert-outline";
    case ToastStyle.Regular: return "";
    default: return "";
  }
}

Update toast-alert-jsx

<div role="alert" className={`alert ${classValue()} ${toastStyle} shadow-lg px-4 py-2 rounded-md`}>

🚀 Implement Your Toast! like a boss

<Toast
    message={errorMessage}
    style={toastStyle}
    type={toastType}
    show={showToast}
    setShow={setShowToast}
/>

Here are the sample screenshots from my project to let you know how it looks.

Now you can send out all the success, error, or info vibes you want!

🥂 Cheers & Closing

That’s it for this post! I hope you had some laughs, learned how to supercharge your own toast component, and got more confident with customizing ReactJS components. 🍻

🌟 Thank you so much for reading my post. More power to Hive Blockchain. More power to Hive community members! Cheers and high fives to YOU for following along. Have a good one! 🚀🎉

📝 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/d5224674-f110-48f1-8ffb-cb290e0f2eac

🚀 My Contributions to ♦️ Hive Ecosystem

🙌 Support Back

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

Vote	For	Witness
	sagarkothari88	Hive account@sagarkothari88
	threespeak	Hive account@threespeak