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

sagarkothari88(77)

Published in

HiveDevs

Words

504

Reading

3 min

Listen

Play

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

image for toast

💡 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.

Screenshot 2025-08-02 at 7.59.42 AM.png

Screenshot 2025-08-02 at 7.57.41 AM.png

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

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