[Toast] - How to use toast outside of component?

The chakra toasts are really beautiful, but unfortunately it seems like there is no way to use them outside of functional components!!

I want to invoke the toast on the success or failure of Rest API, which obviously is in .ts file and outside of component.

Any solution/workaround for this would be highly appreciated. Thanks!

Fo eg:

In my user component:

export const Users = () => {
   .......

    useEffect(() => {
      dispatch(getUsers());
    }, [dispatch]);

   ........
 }

and then in my user action file :

export const getUsers = () => {
    return (dispatch: Dispatch) => {
       getUsersService()
       .then((response: any) => {
         dispatch(setUserList(response));
         // i want to invoke success toast here
       })
      .catch((error: Error) => {
        // i want to invoke error toast here
      });
  };
};

[fakfa19]

import { createStandaloneToast } from "@chakra-ui/react";

const toast = createStandaloneToast();

toast({ title: "Toast", status: "success" });

[ganeshkrishnasharma]

@jmiazga I tried passing toast as a param, and it works fine!

code:

export const Users = () => {
   const toast = useToast();
   .......

    useEffect(() => {
      dispatch(getUsers(toast));
    }, [dispatch]);

   ........
 }

user action file (.ts file)

export const getUsers = (toast: any) => {
    return (dispatch: Dispatch) => {
       getUsersService()
       .then((response: any) => {
         dispatch(setUserList(response));
         toast({
          title: 'Users fetched successfully!',
          status: 'success',
        });
       })
      .catch((error: Error) => {
        toast({
          title: 'Failed to fetch users!',
          status: 'error',
        });
      });
  };
};

@ljosberinn , yeah your solution also looks great, but for my use case i would try to make it generic just by passing toast as shown above , as i have 30+ api integrations required with different success/error/warning toasts to be displayed - hence would be difficult to make it generic with custom hooks!

Thanks guys for your solutions. Much appreciated!