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
| 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 |
🙌 Support Back
❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️
| Vote | For | Witness |
|---|---|---|
 |
sagarkothari88 | @sagarkothari88 |
 |
threespeak | @threespeak |
