custom notificationProvider with custom types
I'm trying to create a custom notificationProvider, but I want to add more types to the notifications, how can I do it?
11 Replies
Hi @Jaoc1811. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Refine's
NotificationProvider
interface defines the type
property of the open
method as "success" | "error" | "progress"
. This means that the type
can only be one of these three values. If you want to add more types to the notifications, you would need to extend the NotificationProvider
interface and define your own types.
However, please note that Refine uses these types to determine the style and behavior of the notifications. If you add custom types, you would also need to handle them in your open
method.
Here's an example of how you might do this:
In this example, a new custom
type is added to the NotificationProvider
interface. In the open
method, a new case
is added to the switch
statement to handle the custom
type.
Remember to handle your custom types in the open
method of your NotificationProvider
to ensure that your notifications behave as expected.
Sources:
- Creating a custom notification provider (https://refine.dev/blog/react-hot-toast#set-up-a-notification-provider)
- NotificationProvider interface (https://refine.dev/docs/notification/notification-provider)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo•6mo ago
I want also to add a duration property to the open function, how do I add it? and what do I have to do to use this new notificationProvider and dont have type errors when passing this custom atributes? @kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
To add a
duration
property to the open
function, you would need to extend the OpenNotificationParams
interface and add the duration
property. Here's how you can do it:
In this example, a new OpenNotificationParams
interface is created that extends the OpenNotificationParams
interface from Refine and adds a duration
property. This duration
property is then used in the open
method to set the duration of the toast notifications.
To use this new notificationProvider
and avoid type errors when passing these custom attributes, you would need to pass it to the <Refine />
component using the notificationProvider
prop:
This way, Refine will use your custom notificationProvider
instead of the default one, and you can use your custom attributes without getting type errors.
Sources:
- Creating a custom notification provider (https://refine.dev/blog/react-hot-toast#set-up-a-notification-provider)
- NotificationProvider interface (https://refine.dev/docs/notification/notification-provider)
- Refine component (https://refine.dev/docs/api-reference/components/refine-config)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo•6mo ago
@kapa.ai I'm doing the way you're telling me, but when I use the useNotification I'm getting errors for the new custom values
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useNotification
hook uses the NotificationContext
to access the NotificationProvider
that you passed to the <Refine />
component. If you're getting type errors when using the useNotification
hook with your custom NotificationProvider
, it's likely because the useNotification
hook is still using the original NotificationProvider
interface, which doesn't include your custom attributes.
To fix this, you would need to create a custom useNotification
hook that uses your custom NotificationProvider
interface. Here's how you can do it:
In this example, a new useNotification
hook is created that calls the useNotification
hook from Refine and casts the result to your custom NotificationProvider
interface. This way, when you use your custom useNotification
hook, it will use your custom NotificationProvider
interface and you won't get type errors when using your custom attributes.
Remember to replace all instances of useNotification
from Refine with your custom useNotification
hook in your components.
Sources:
- useNotification hook (https://refine.dev/docs/api-reference/hooks/notification/useNotification)
- NotificationProvider interface (https://refine.dev/docs/notification/notification-provider)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo•6mo ago
nope, it doesn't work @kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
I'm sorry to hear that you're still having trouble. Unfortunately, the information provided in the knowledge sources does not cover how to extend the
useNotification
hook to handle custom attributes in Refine.
I would recommend reaching out to the Refine community for further assistance. They might be able to provide more specific guidance on how to extend the useNotification
hook to handle custom attributes. You can ask for help in the Refine Discord server (https://discord.com/channels/837692625737613362/1187552521040953344) or open an issue in the Refine GitHub repository (https://github.com/refinedev/refine/issues).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below