correct-apricot•10mo ago

remove toast

whenever we get a toast at the top whether it is a success or error, it stays there for a few seconds. is there any way two remove that manually by clicking on cancel button on the toast. can we do that

8 Replies

kapa.ai•10mo ago

Hi @alfaz_muhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can manually dismiss a toast notification in refine by using a 'dismiss' button. To do this, you need the toast's unique ID or the toast itself, which you usually get when you show the notification. Here's how you can do it:

const { open, close } = useNotification();  

// Open notification  
open({  
 type: "success",  
 message: "Success",  
 description: "This is a success message",  
});  

// close notification  
close("notification-key");

const { open, close } = useNotification();  

// Open notification  
open({  
 type: "success",  
 message: "Success",  
 description: "This is a success message",  
});  

// close notification  
close("notification-key");

In the code above, the open method is used to display the notification, and the close method is used to dismiss it. The close method requires the unique ID of the toast notification, which is provided when the notification is opened. For more details, you can refer to the documentation (https://refine.dev/docs/api-reference/core/hooks/useNotification/#basic-usage) page. Also, if you want to dismiss all toasts, you can use the 'dismiss' function without any ID. Please note that this information is based on the extracts from the refine blog (https://refine.dev/blog/react-hot-toast/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below

correct-apricot•10mo ago

@kapa.ai I need the toast to be gone when i click on it

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can configure the toast notifications to be dismissed when clicked. This can be achieved by using the onClick event handler in the toast configuration. Here's an example of how you can do it:

import toast from "react-hot-toast";

toast.success("Success message", {
  id: "unique-toast-id",
  position: "top-right",
  onClick: () => {
    toast.dismiss("unique-toast-id");
  },
});

import toast from "react-hot-toast";

toast.success("Success message", {
  id: "unique-toast-id",
  position: "top-right",
  onClick: () => {
    toast.dismiss("unique-toast-id");
  },
});

In the code above, an onClick event handler is added to the toast configuration. When the toast is clicked, the toast.dismiss function is called with the unique ID of the toast, which dismisses the toast. Please note that this information is based on the extracts from the refine blog (https://refine.dev/blog/react-hot-toast/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below

correct-apricot•10mo ago

@kapa.ai but when i use useForm for a create/edit, iam not explicetly calling a toast but it automatically comes if its successs or error. how do i dismiss that

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In refine, the toast notifications for success or error messages during form submissions are handled by the useForm hook. These notifications are automatically displayed when a form is submitted and either succeeds or encounters an error. To dismiss these notifications manually, you can customize the successNotification and errorNotification props in the useForm hook. You can return a custom notification object that includes an onClick handler to dismiss the notification when it's clicked. Here's an example of how you can do it:

const { saveButtonProps, refineCore: { formLoading }, register, handleSubmit } = useForm({
    refineCoreProps: {
        action: "create",
        resource: "users",
        successNotification: (data, values, resource) => {
            return {
                message: `Success message`,
                description: "Success",
                type: "success",
                onClick: () => {
                    toast.dismiss("unique-toast-id");
                },
            };
        },
        errorNotification: (data, values, resource) => {
            return {
                message: `Error message`,
                description: "Error",
                type: "error",
                onClick: () => {
                    toast.dismiss("unique-toast-id");
                },
            };
        },
    },
});

const { saveButtonProps, refineCore: { formLoading }, register, handleSubmit } = useForm({
    refineCoreProps: {
        action: "create",
        resource: "users",
        successNotification: (data, values, resource) => {
            return {
                message: `Success message`,
                description: "Success",
                type: "success",
                onClick: () => {
                    toast.dismiss("unique-toast-id");
                },
            };
        },
        errorNotification: (data, values, resource) => {
            return {
                message: `Error message`,
                description: "Error",
                type: "error",
                onClick: () => {
                    toast.dismiss("unique-toast-id");
                },
            };
        },
    },
});

In the code above, the successNotification and errorNotification props are used to customize the success and error notifications respectively. An onClick handler is added to each notification configuration. When the notification is clicked, the toast.dismiss function is called with the unique ID of the toast, which dismisses the toast. Please note that this information is based on the extracts from the refine blog (https://refine.dev/blog/react-hot-toast/) and refine documentation (https://refine.dev/docs/api-reference/core/hooks/useForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below