Show a toast without using useToast hook

[priyanthabuddhika]

Is there a way to show a toast using a method instead of the useToast hook ? It would be helpful to show toast messages outside of react components.

[puneet-sarhali]

No not possible (Assuming by "outside react components" you mean server component). The "useToast" hook does all the heavy lifting for the component, and has a bunch of things that wouldn't work in a server component like "useState", "useEffect" and event listeners.

[priyanthabuddhika]

@puneet-sarhali Sorry I could have added an example before. No, Actually I didn't mean server components, what I meant was how to show a toast inside something like a interceptor in axios, in redux state actions which are not React jsx components.

[Natchii59]

You can use toast function that we export to the file use-toast.ts

[joepetrillo]

You can use toast function that we export to the file use-toast.ts

Can you describe why/when we should use the hook vs the function and vice versa?

[benomzn]

You can use toast function that we export to the file use-toast.ts

Can you describe why/when we should use the hook vs the function and vice versa?

For example, when you want to add an interceptor error for axios response. Some people create an api.ts file to configure an Axios instance, so you can't use Hooks in .ts file.

https://react.dev/warnings/invalid-hook-call-warning

[carlos19960601]

You can use toast function that we export to the file use-toast.ts

Can you describe why/when we should use the hook vs the function and vice versa?

For example, when you want to add an interceptor error for axios response. Some people create an api.ts file to configure an Axios instance, so you can't use Hooks in .ts file.

https://react.dev/warnings/invalid-hook-call-warning

same scenes.

[peppemig]

any news on this? it'd be really useful in order to extract some logic out of the component

[robZuk]

import { toast } from "@/components/ui/use-toast"