Notifications

is the convenient way to keep Notifications open until they are dismissed

9 Replies

Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, notifications can be managed using the useNotification hook. This hook provides open and close methods that can be used to show and hide notifications respectively. To keep a notification open until it is dismissed, you can simply call the open method and not set an auto-close time. The notification will remain open until the close method is called with the notification's key. Here's an example of how to use the useNotification hook to open a notification:

import { useNotification } from "@refinedev/core";  

const { open } = useNotification();  

open?.({  
 type: "success",  
 message: "Hey",  
 description: "I <3 Refine",  
 key: "unique-id",  
});

import { useNotification } from "@refinedev/core";  

const { open } = useNotification();  

open?.({  
 type: "success",  
 message: "Hey",  
 description: "I <3 Refine",  
 key: "unique-id",  
});

And here's how you can close a notification:

import { useNotification } from "@refinedev/core";  

const { close } = useNotification();  

close?.("unique-id");

import { useNotification } from "@refinedev/core";  

const { close } = useNotification();  

close?.("unique-id");

In this example, "unique-id" is the key of the notification. You need to pass this key to the close method to dismiss the notification. For more information, you can refer to the useNotification documentation (https://refine.dev/docs/notification/hooks/use-notification) and the Notification Provider documentation (https://refine.dev/docs/notification/notification-provider). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

xenophobic-harlequin•4mo ago

@kapa.ai how about from the modal forms errorNotification errorNotification: (error) => {

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, the errorNotification prop in the useForm hook allows you to customize the error notification that is shown when a form submission fails. This prop requires the NotificationProvider to work. Here's an example of how you can use the errorNotification prop:

useForm({  
 errorNotification: (error, values, resource) => {  
 return {  
 message: `Failed to create ${values.title}`,  
 description: error.message,  
 type: "error",  
 };  
 },  
});

useForm({  
 errorNotification: (error, values, resource) => {  
 return {  
 message: `Failed to create ${values.title}`,  
 description: error.message,  
 type: "error",  
 };  
 },  
});

In this example, the errorNotification function receives the error returned from the data provider as the first argument. It returns an object that specifies the message, description, and type of the notification. You can also disable the notification by setting errorNotification to false. For more information, you can refer to the useForm documentation (https://refine.dev/docs/data/hooks/use-form#errornotification-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

xenophobic-harlequin•4mo ago

@kapa.ai but there is no way to make it persist until dismissed from the forms

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In the current implementation of Refine, the errorNotification prop in the useForm hook does not provide an out-of-the-box way to make error notifications persist until they are manually dismissed. The notifications are designed to automatically close after a certain duration. However, you can use the useNotification hook to manually control the opening and closing of notifications. This hook provides open and close methods that can be used to show and hide notifications respectively. Here's an example of how to use the useNotification hook to open a notification:

import { useNotification } from "@refinedev/core";  

const { open } = useNotification();  

open?.({  
 type: "error",  
 message: "Error",  
 description: "Something went wrong",  
 key: "unique-id",  
});

import { useNotification } from "@refinedev/core";  

const { open } = useNotification();  

open?.({  
 type: "error",  
 message: "Error",  
 description: "Something went wrong",  
 key: "unique-id",  
});

And here's how you can close a notification:

import { useNotification } from "@refinedev/core";  

const { close } = useNotification();  

close?.("unique-id");

import { useNotification } from "@refinedev/core";  

const { close } = useNotification();  

close?.("unique-id");

In this example, "unique-id" is the key of the notification. You need to pass this key to the close method to dismiss the notification. For more information, you can refer to the useNotification documentation (https://refine.dev/docs/notification/hooks/use-notification/) and the Notification Provider documentation (https://refine.dev/docs/notification/notification-provider). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

rare-sapphire•4mo ago

Hey @Joe Gaffney, this may be achieved using the <RefineSnackbarProvider /> component and passing the persist: true prop. As an alternative, you might want to customize the open function of the useNotificationProvider via swizzle and pass autoHideDuration as null to disable auto hide.

xenophobic-harlequin•4mo ago

Great thanks will give that ago.