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
onClick event handler in the toast configuration. onClick event handler is added to the toast configuration. When the toast is clicked, the function is called with the unique ID of the toast, which dismisses the toast.useForm hook. These notifications are automatically displayed when a form is submitted and either succeeds or encounters an error.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.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 function is called with the unique ID of the toast, which dismisses the toast.opencloseclosetoast.dismisstoast.dismissconst { open, close } = useNotification();
// Open notification
open({
type: "success",
message: "Success",
description: "This is a success message",
});
// close notification
close("notification-key"); import toast from "react-hot-toast";
toast.success("Success message", {
id: "unique-toast-id",
position: "top-right",
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");
},
};
},
},
});