The Blog of sagarkothari88

sagarkothari88's avatar

🥳 Learning ReactJS + Vite + TS + AIOHA - Day 7 – Show a Toast Message! 🥨

By sagarkothari88 on 8/2/2025

🚀 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:

sample image for preview of a toast message

🥳 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:

Go to DaisyUI

Now click on JSX and copy it:

copy code snippet

🥂 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

🚀 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

Comments (3)

kgakakillerg's avatar @kgakakillerg 8/2/2025

Stop downvoting my original content with your alt account @letusbuyhive

Please explain why you keep downvoting my original content 🤔

Also 😂😂😂😂😂

Blocktrades can you please stop downvoting my original content with your alt accounts thanks 🙏🏾

😂😂😂😂😂😂😂😂😂😂😂😂😂

Don't be jealous So sad @themarkymark aka @theycallmemarky Aka @marky @gogreenbuddy Aka @usainvote @buildawhale Aka @punkteam Aka @ipromote

@letusbuyhive Aka @sagarkothari88 please explain why you keep downvoting my original content and comments 🤔

Please explain to everyone why 🤔

@meno @steevc @crimsonclad @azircon let's not forget blocktrades 😂 please tell your racist friend to stop downvoting my original content

How can we we allow a mentally ill person to have so much control on Hive 😂

It's unbelievable you downvoted this Goodbye Auntie R.I.P 🙏🏾 You fucked up big time it's clear blocktrades is in control 😂

If nothing can be done about your downvote abuse then Hive is a dead project 👎🏾

It's crazy that the person doing the downvoting is also farming the shit out of Hive 😂😂😂😂

If anyone wants to speak to me privately send me a message on Instagram @kgakakillerg

You can never stop the truth with lies 😂😂😂😂😂😂

It's crazy we have a man who pretends to be a millionaire running around Hive downvoting people for fun 🤔 and nothing has been done 🤔

It's crazy that someone is trying to bully me on Hive 😂😂😂😂😂😂😂😂

It's unbelievable that no one has came to help as people are afraid to say anything or they get downvoted too 😂😂😂😂😂😂

There's no real freedom on Hive if one person can cause so much harm

I feel sorry for you 🙏🏾

One thing you need to remember you can't take anything with you 😂😂😂😂

Go and enjoy your life have a bit of fun let your hair down go out and meet some real people in the flesh 😉

Your actions show that you must own Hive Blockchain 🤔 why do your actions go unchallenged 🤔

You are now stalking me 😂😂😂😂

Are you jealous about the DHF 😂😂😂😂

Aren't you farming enough rewards 😂😂😂😂

I heard you were into very young girls 😂😂😂😂😂😂

Is that why you are always online 🤔

Stalking people

No one is scared of you 😂😂😂😂😂😂😂

You are bad for Hive

Power down and go away get a life

https://hive.blog/hive-135178/@crimsonclad/re-kgakakillerg-sxllhv

https://hive.blog/hive-148441/@hivewatchers/svftu9

https://hive.blog/hive-148441/@hivewatchers/svdjjz

https://hive.blog/hive-176853/@steevc/re-kgakakillerg-syyy4x

https://hive.blog/dev/@howo/re-kgakakillerg-szhax7

https://hive.blog/hive/@steevc/follow-friday-respect

It's unbelievable that they downvoted this Goodbye Auntie R.I.P 🙏🏾

It's clear you need help 🙏🏾

Hive is being held down by downvoting whales

Do you get a buzz out of downvoting people 🤔

You should really try to get outside more spend some time in the real world 🌎🌍

Why are you pushing people away to blurt and steemit

You are all definitely going to hell 😂😂😂😂😂😂😂😂

Why do you want to make enemies all over the world 🤔

Blocktrades stop making a fool of yourself 😂😂😂😂😂😂

Steevc please explain to your friend they have been exposed 😂😂😂😂😂

Downvotes are weak like you 😂😂😂😂😂😂😂

Why don't you go and spend your millions of dollar's you have 😂😂😂😂😂😂😂😂😂😂😂😂

Blocktrades please explain why you keep downvoting my original content with your alt accounts 🤔

You are so sad it's unreal 😂😂😂😂😂

You must know that you can't hide on Hive 😂😂😂😂😂😂😂

If you want everyone to leave Hive keep doing what you are doing 😂😂😂😂😂😂😂😂😂😂

Just remembered who started this

I'll be here to turn the lights off 😂😂😂😂😂😂

You are still stalking me 😂😂😂😂😂 it proves you have no life outside of Hive 😂😂😂😂😂😂😂👎🏾👎🏾👎🏾👎🏾👎🏾👎🏾👎🏾😂😂😂😂😂

Blocktrades please can you stop downvoting my original content with your alt accounts 🤔

Also is bullying people ok on Hive 🤔

You are only making Hive look like a big scam

Why do you keep stalking me I'm not gay sorry I can't help you 🙏🏾

Just tell me what the issue is 🤔

You are that stupid you set up an account called letusbuyhive to downvote people and support your farming Hive friend's 😂😂😂😂😂 and @buildawhale

Please get some help 🙏🏾

It's clear who has mental health issues that's why you should really stop pointing fingers at others 😂😂😂😂😂😂😂😂😂

It's clear blocktrades is behind this 😂😂😂😂😂

Can you please explain why you keep downvoting my original content I don't want to hear it's because disagreement of rewards I don't make any 😂😂😂😂😂

Please move on with your life blocktrades and leave me alone thank you 🙏🏾

Please tell everyone why you keep downvoting my original content 🤔

Still stalking me 😂😂😂😂😂😂

The way you are stalking me it's clear you have no Life outside of Hive 😂😂😂😂😂😂😂

Keep downvoting people away 😂😂😂😂😂

Some people never learn 😂😂😂😂😂😂😂🤣🤣🤣🤣🤣

Is life that bad 😂😂😂😂😂

You can't win this 😂😂😂😂😂😂😂😂😂

indiaunited's avatar @indiaunited 8/2/2025

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

image.png

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.

sagarkothari88's avatar @sagarkothari88 8/3/2025

Thank you so much @indiaunited & @bhattg for curation.
via Inbox

vastavikadi's avatar @vastavikadi 8/2/2025

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.

sagarkothari88's avatar @sagarkothari88 8/3/2025

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

vastavikadi's avatar @vastavikadi 8/3/2025

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.