Login with Hive Keychain
Enter your Hive username to sign in securely.
Welcome to HiveComb
HiveComb runs on Hive — an open, decentralized blockchain where your posts, votes, and communities belong to you, not a company. To get started, follow these steps:
Create a Hive account
Set up your free account — it only takes a minute.
Install Hive Keychain
A browser extension that securely signs your transactions — your keys never leave your device.
Refresh & log in
Once Keychain is installed, refresh this page and click Login again.
Need help? Join our Discord and we'll help you get set up.
No account? Create one
Having trouble creating your account? Come to our Discord and we'll get you set up.
No posts found
Try adjusting your filters or wait for the worker to classify more posts.
No posts found
Try adjusting your filters or wait for the worker to classify more posts.
No posts found
Try adjusting your filters or wait for the worker to classify more posts.
Welcome to HiveComb!
Choose your default filters to see the content you care about most.
Languages
Categories
Sentiment
🥳 Learning ReactJS + Vite + TS + AIOHA - Day 7 – Show a Toast Message! 🥨
🚀 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
🥳 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:
Now click on JSX and copy it:
🥂 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 |
🙌 Support Back
❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️
| Vote | For | Witness |
|---|---|---|
| sagarkothari88 | @sagarkothari88 | |
| threespeak | @threespeak |
Report Misclassification
Why is this post incorrectly classified?
Comments
5 commentsThis post has been manually curated by @bhattg from Indiaunited community. Join us on our Discord Server.
Do you know that you can earn a passive income by delegating to @indiaunited. We share more than 100 % of the curation rewards with the delegators in the form of IUC tokens. HP delegators and IUC token holders also get upto 20% additional vote weight.
Here are some handy links for delegations: 100HP, 250HP, 500HP, 1000HP.
100% of the rewards from this comment goes to the curator for their manual curation efforts. Please encourage the curator @bhattg by upvoting this comment and support the community by voting the posts made by @indiaunited.
Thank you so much @indiaunited & @bhattg for curation.
via Inbox
I never thought I would get to see someone as a Developer posting on HIVE especially the coding tutorials. Well there's a better way to do this, that is to use the react-toastify library. That's better with its inbuilt features for success, error and info messages. So, I use that.
Thank you @vastavikadi for suggestion. I'll look into react-toastify
What do you think of https://github.com/emilkowalski/sonner?
It would be great if you can share links of learnings different topics of React e.g. Redux-toolkit, react-toastify etc.
How did you find my tutorial? I am documenting my journey so that in future, I can reference my own learnings. Just like we do in college days - make notes.
via Inbox
Sonner is another banger you could use it too. I have used sonner once or twice but I like to use toastify. For your question, I have already answered that in my previous reply. For the resources and my learnings, I have followed different Youtubers like Chai aur Code, Piyush and other foreigner youtubers like Dave Grey (hope the name is correct) and then the documentation is always there. Do remember to go for redux-toolkit and react-redux, old library of redux was quite complicated.
If you find redux to be hard to understand then go for zustand. Same functionality but with lesser boiler plate codes.