Toast component being called without pressing button

[vmorales-2920]

Hi all, I need to create a component where it executes the Toast component the moment the component is called
This is my component

toast.tx

`
"use client";
import React, { useEffect } from 'react';
import { addToast, Button, ToastProvider } from "@heroui/react";
import "../../app/globals.css";

      interface IProps {
          title: string;
          description: string;
          type: "success" | "danger" | "warning" | "default";
      }
      
      export default function CustomToast({ title, description, type }: IProps) {
          useEffect(() => {
              addToast({
                  title,
                  description,
                  color: type,
                  timeout: 5000,
                  variant: "solid",
                  radius: "sm",
              });
          }, [title, description, type]);
      
          return (
              <>
                  <ToastProvider placement={"top-right"} toastOffset={60} />
                  <div className="flex flex-wrap gap-2">
                      <Button
                          className=""
                          onPress={() => {
                              addToast({
                                  title,
                                  description,
                                  color: type,
                                  timeout: 5000,
                                  variant: "solid",
                                  radius: "sm",
                              })
                          }}
                      >
                      </Button>
                  </div >
              </>
          );
      }

`
I've been trying to execute the toast with an useEffect but is not showing the Toast component. Does someone has try to use the Toast component like this?

Just for information, I'm using NextJS 14 and I have also added the ToastProvider in the HeroUIProvider

Thanks

[amanullahpy]

It looks like you want your toast notification to appear automatically when the component is rendered. However, the addToast function might not be triggering correctly due to how HeroUI's toast system works. Here are a few things to check and improve:

Possible Issues & Fixes

1. Ensure addToast is Imported Correctly

   • If addToast is coming from @heroui/react, make sure it's a function that can be called inside useEffect. Some libraries require it to be accessed via context.
   • Try logging inside useEffect to see if it runs when the component is mounted:

     useEffect(() => {
         console.log("Toast effect running");
         addToast({
             title,
             description,
             color: type,
             timeout: 5000,
             variant: "solid",
             radius: "sm",
         });
     }, [title, description, type]);

2. Ensure the ToastProvider is in _app.tsx or Layout

   • The ToastProvider should be wrapping your entire application in _app.tsx (Next.js 13) or inside layout.tsx (Next.js 14+):

     import { HeroUIProvider, ToastProvider } from "@heroui/react";
     
     export function Providers({ children }) {
         return (
             <HeroUIProvider>
                 <ToastProvider placement="top-right" toastOffset={60} />
                 {children}
             </HeroUIProvider>
         );
     }

3. Check If Toast is Working Manually

   • Try triggering the toast using the button inside your component first:

     <Button onPress={() => {
         addToast({
             title,
             description,
             color: type,
             timeout: 5000,
             variant: "solid",
             radius: "sm",
         });
     }}>
         Show Toast
     </Button>

   • If the button works but useEffect doesn't, it might be related to hydration issues in Next.js.

4. Fix Hydration Issues (Use useClientEffect)

   • Next.js uses server-side rendering, and some libraries require hydration before running effects. Try delaying the effect using setTimeout:

     useEffect(() => {
         const timer = setTimeout(() => {
             addToast({
                 title,
                 description,
                 color: type,
                 timeout: 5000,
                 variant: "solid",
                 radius: "sm",
             });
         }, 100); // Small delay to ensure hydration
         return () => clearTimeout(timer);
     }, [title, description, type]);

[vmorales-2920]

@Aman3899 Solution was helpful!