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:

import React from "react";  
import { NotificationProvider as RefineNotificationProvider } from "@refinedev/core";  
import toast from "react-hot-toast";  

interface NotificationProvider extends RefineNotificationProvider {  
 open: (params: OpenNotificationParams & { type: "success" | "error" | "progress" | "custom" }) => void;  
}

export const notificationProvider: NotificationProvider = {  
 open: ({ key, message, type }) => {  
 switch (type) {  
 case "success":  
 toast.success(message, {  
 id: key,  
 position: "top-right",  
 });  
 break;  
 case "error":  
 toast.error(message, {  
 id: key,  
 position: "top-right",  
 });  
 break;  
 case "custom":
 // handle your custom type here
 break;
 default:  
 break;  
 }  
 },  
 close: (key: any) => {  
 toast.dismiss(key);  
 },  
};

import React from "react";  
import { NotificationProvider as RefineNotificationProvider } from "@refinedev/core";  
import toast from "react-hot-toast";  

interface NotificationProvider extends RefineNotificationProvider {  
 open: (params: OpenNotificationParams & { type: "success" | "error" | "progress" | "custom" }) => void;  
}

export const notificationProvider: NotificationProvider = {  
 open: ({ key, message, type }) => {  
 switch (type) {  
 case "success":  
 toast.success(message, {  
 id: key,  
 position: "top-right",  
 });  
 break;  
 case "error":  
 toast.error(message, {  
 id: key,  
 position: "top-right",  
 });  
 break;  
 case "custom":
 // handle your custom type here
 break;
 default:  
 break;  
 }  
 },  
 close: (key: any) => {  
 toast.dismiss(key);  
 },  
};

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: ----------------------

kapa.ai•5mo ago

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

foreign-sapphire•5mo 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

kapa.ai•5mo ago

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:

import React from "react";  
import { NotificationProvider as RefineNotificationProvider, OpenNotificationParams as RefineOpenNotificationParams } from "@refinedev/core";  
import toast from "react-hot-toast";  

interface OpenNotificationParams extends RefineOpenNotificationParams {  
 duration?: number;  
}

interface NotificationProvider extends RefineNotificationProvider {  
 open: (params: OpenNotificationParams & { type: "success" | "error" | "progress" | "custom" }) => void;  
}

export const notificationProvider: NotificationProvider = {  
 open: ({ key, message, type, duration }) => {  
 switch (type) {  
 case "success":  
 toast.success(message, {  
 id: key,  
 duration: duration,  
 position: "top-right",  
 });  
 break;  
 case "error":  
 toast.error(message, {  
 id: key,  
 duration: duration,  
 position: "top-right",  
 });  
 break;  
 case "custom":
 // handle your custom type here
 break;
 default:  
 break;  
 }  
 },  
 close: (key: any) => {  
 toast.dismiss(key);  
 },  
};

import React from "react";  
import { NotificationProvider as RefineNotificationProvider, OpenNotificationParams as RefineOpenNotificationParams } from "@refinedev/core";  
import toast from "react-hot-toast";  

interface OpenNotificationParams extends RefineOpenNotificationParams {  
 duration?: number;  
}

interface NotificationProvider extends RefineNotificationProvider {  
 open: (params: OpenNotificationParams & { type: "success" | "error" | "progress" | "custom" }) => void;  
}

export const notificationProvider: NotificationProvider = {  
 open: ({ key, message, type, duration }) => {  
 switch (type) {  
 case "success":  
 toast.success(message, {  
 id: key,  
 duration: duration,  
 position: "top-right",  
 });  
 break;  
 case "error":  
 toast.error(message, {  
 id: key,  
 duration: duration,  
 position: "top-right",  
 });  
 break;  
 case "custom":
 // handle your custom type here
 break;
 default:  
 break;  
 }  
 },  
 close: (key: any) => {  
 toast.dismiss(key);  
 },  
};

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:

import { Refine } from "@refinedev/core";
import { notificationProvider } from "./providers/NotificationProvider";
function App() {
  return (
    <Refine notificationProvider={notificationProvider}>
      {/* your routes and resources */}
    </Refine>
  );
}

export default App;

import { Refine } from "@refinedev/core";
import { notificationProvider } from "./providers/NotificationProvider";
function App() {
  return (
    <Refine notificationProvider={notificationProvider}>
      {/* your routes and resources */}
    </Refine>
  );
}

export default App;

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: ----------------------

kapa.ai•5mo ago

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

foreign-sapphire•5mo 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

kapa.ai•5mo ago

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:

import React from "react";
import { useNotification as useRefineNotification } from "@refinedev/core";

interface OpenNotificationParams extends RefineOpenNotificationParams {  
 duration?: number;  
}

interface NotificationProvider extends RefineNotificationProvider {  
 open: (params: OpenNotificationParams & { type: "success" | "error" | "progress" | "custom" }) => void;  
}

export function useNotification(): NotificationProvider {
  const notification = useRefineNotification();
  return notification as NotificationProvider;
}

import React from "react";
import { useNotification as useRefineNotification } from "@refinedev/core";

interface OpenNotificationParams extends RefineOpenNotificationParams {  
 duration?: number;  
}

interface NotificationProvider extends RefineNotificationProvider {  
 open: (params: OpenNotificationParams & { type: "success" | "error" | "progress" | "custom" }) => void;  
}

export function useNotification(): NotificationProvider {
  const notification = useRefineNotification();
  return notification as NotificationProvider;
}

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: ----------------------

kapa.ai•5mo ago

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

foreign-sapphire•5mo ago

nope, it doesn't work @kapa.ai

kapa.ai•5mo ago

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: ----------------------

kapa.ai•5mo ago

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