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**](https://peakd.com/hive-139531/@sagarkothari88/integrate-aioha-with-your-react-app-from-scratch-vite--tailwind--daisyui): Fresh React app + AIOHA integration!
- [🧭 **Day Two**](https://peakd.com/hive-139531/@sagarkothari88/integrating-react-router-my-routing-adventures-with-react): Routing drama & rebellious NavBar 😤
- [🛠️ **Day Three**](https://peakd.com/hive-139531/@sagarkothari88/from-navbar-mess-to-react-router-success-fixing-layouts-routing-and-aioha-in-one-go): Fixed Layouts, Routing & AIOHA 💥
- [🧠 **Day Four**](https://peakd.com/hive-139531/@sagarkothari88/day-4-reactjs-adventures--distriator-progress-usestate-useeffect-and-env-chaos): useState, useEffect, and .env headaches 😅
- [🧹 **Day Five**](https://peakd.com/hive-139531/@sagarkothari88/level-up-your-imports-using-path-aliases-for-cleaner-react--typescript-projects): Path Aliases to clean up relative path spaghetti 🍝
- [📡 **Day Six**](https://peakd.com/hive-139531/@sagarkothari88/day-6-learning-reactjs-calling-apis-and-creating-context-providers-or-distriator-feature-update): Create Context Provider & call API
- [🍞 **Day Seven**](https://peakd.com/hive-139531/@sagarkothari88/learning-reactjs--vite--ts--aioha-day-7-show-a-toast-message): Show a toast message
- [🔐 **Day Eight**](https://peakd.com/hive-139531/@sagarkothari88/day-8-secure-login-with-aioha-and-localstorage-magic): 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](https://github.com/emilkowalski/sonner))... **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](https://repository-images.githubusercontent.com/150962034/281dd200-8fe0-11e9-89bd-da5aadf4560d)

---

### 💡 **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](https://files.peakd.com/file/peakd-hive/sagarkothari88/23xxi8iRSPw2bhWBganbR9qrx5APRGq9NxxG1aBh64fJRi49LgLmT8YXahJUVTxsYS3Uf.png)

![Screenshot 2025-08-02 at 7.57.41 AM.png](https://files.peakd.com/file/peakd-hive/sagarkothari88/241tXEeTgNZUWf54NzDgmtXDZX152A1zvpnv86iKHDq7twujxd2xdD5fXdKwCaSp4WcsS.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](https://distriator.com/) |
| [CheckinWithXYZ](https://checkinwith.xyz/) | [Hive Inbox](https://hive-inbox.the-hive-mobile.app/) | [HiFind](https://hifind.the-hive-mobile.app/) | [Hive Donate App](https://donate.the-hive-mobile.app/) |
| Contributed to HiveAuth Mobile App | Ecency ↔ 3Speak Integration | Ecency ↔ InLeo Integration | Ecency ↔ Actifit Integration |
| [Hive Stats App](https://stats.the-hive-mobile.app/) | [Vote for Witness App](https://witness.the-hive-mobile.app/) | [HiveFlutterKit](https://hiveflutterkit.sagarkothari88.one/docs/intro) | [New 3Speak App](https://3speak.sagarkothari88.one/#/?tab=home) |

---



### 🙌 Support Back

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

| Vote | For | Witness |
|------|-----|---------|
| [![](https://images.hive.blog/u/sagarkothari88/avatar)](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | [sagarkothari88](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | @sagarkothari88 |
| [![](https://images.hive.blog/u/threespeak/avatar)](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | [threespeak](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | @threespeak |

---