R
Refine

ask-any-question

custom notificationProvider with custom types

Rratty-blush3/26/2024
I'm trying to create a custom notificationProvider, but I want to add more types to the notifications, how can I do it?
Kkapa.ai3/26/2024
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: ----------------------
Kkapa.ai3/26/2024
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
Rratty-blush3/26/2024
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
Kkapa.ai3/26/2024
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: ----------------------
Kkapa.ai3/26/2024
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
Rratty-blush3/26/2024
@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
Kkapa.ai3/26/2024
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: ----------------------
Kkapa.ai3/26/2024
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
Rratty-blush3/26/2024
nope, it doesn't work @kapa.ai
Kkapa.ai3/26/2024
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: ----------------------
Kkapa.ai3/26/2024
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
notification that not closes automaticlyHow can I create a notification with useNotification that not closes automaticly?Refine AntD Form create new recordsHow do I conventionally code a component that have an antd "Form" with input, map those inputs to eanextjsHi everyone, what is the recommended way to build an app with Refine, using Next.js or React?WebSocket is closed before the connection is established (localhost:5002)Hello Just following refine's supabase tutorial, I just setup the project (no crud yet), and can't gHow to make a download from public directory (Next.js frontend)I am using Next.js frontend and I want to add the user to download a pdf file. I created /src/publiQuestion about Refines backendI’m just starting off working with the template CRM app mainly for its Kanban board. I deployed the Nested route problemsI'm using Refine and Antd. My app.tsx: <Refine dataProvider={dataProvider(supabaseClError when submitting form via Ant Design's useModalForm.I get the following error: ``` Converting circular structure to JSON --> starting at object with conrefinehow to use refine with firebase?ThemeLayoutV2 ModificationHow do I modify the ThemeLayoutV2 or Sider for Antd5 so that the default behavoir is to land on the Confirmation on mutate updateHow can i add Confirmation on mutate update for useUpdateLogin/ Register authHello, im following this tutorial https://youtu.be/6a3Dz8gwjdg. Everything was working fine until iWeb browser autocomplete not trigger form updateI had a form like this but when the user uses the web browser autocomplete function, data inside thereact-i18next empty objectHi, I am following https://refine.dev/docs/guides-concepts/i18n/#adding-the-translations-files To Whomai unauthorised issue@kapa.ai I have an error showing in the console "http://localhost:5001/api/sessions/whomai" 401 unauCan I use supabase as backend in the CRM example??I have been trying to create a management application and the refine CRM has most of the features anApp CRM applicationHey all, I am trying to fork the App CRM application for a personal project, and I need help undersChange title of app (displayed in tab)Hey all, Apologies for the (likely) simple question. I have a refine app that I want to deploy. TheI just have a question why the viteI just have a question why the vite template doesn't include i18n when using the CLI?Invalidating a nested resource after an update REST requestIf my getOne api route is /teams/{teamId}/members/{memberId} its resource is '/teams/{teamId}/member