rare-sapphire
rare-sapphire15mo ago

Override built-in notification messages

Hello! I would like to use the built-in notification provider but pass my own messages and description. I've checked the "Fine Foods" example as guidance, and I can pop up my own notification. The problem is that current notifications still show up. For example, for my login implementation in the auth provider
import { notification } from "antd";

try {

... login logic here

} catch (error: any) {
notification.error({ message: "Login failed", description: error.response.data.message})
return {
success: false,
redirectTo: '/login'
}
}
import { notification } from "antd";

try {

... login logic here

} catch (error: any) {
notification.error({ message: "Login failed", description: error.response.data.message})
return {
success: false,
redirectTo: '/login'
}
}
I only want to show the first notification (see screenshot). Do I need to create a notification provider from scratch?
No description
4 Replies
kapa.ai
kapa.ai15mo ago
Hi @jaco0670. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai15mo ago
---------------------- Hello! Based on the information extracts provided, you can customize the success and error notifications using the successNotification and errorNotification properties in the useCustom and useCustomMutation hooks. However, these hooks are not directly related to the authentication process. To prevent the default notifications from showing up while using your custom notifications, you can create a custom notification provider. You don't need to create it from scratch, but you can modify the built-in notification provider to suit your needs. Here's an example of how to create a custom notification provider using Ant Design:
import { notification } from "antd";

const customNotificationProvider = {
open: ({ message, key, type, description }) => {
if (type === "error") {
notification.error({ message, description });
} else if (type === "success") {
notification.success({ message, description });
} else {
// Handle other types as needed
}
},
close: (key) => {
// Implement the close method if needed
},
};
import { notification } from "antd";

const customNotificationProvider = {
open: ({ message, key, type, description }) => {
if (type === "error") {
notification.error({ message, description });
} else if (type === "success") {
notification.success({ message, description });
} else {
// Handle other types as needed
}
},
close: (key) => {
// Implement the close method if needed
},
};
Then, pass the customNotificationProvider to the <Refine> component:
import { Refine } from "@refinedev/core";

const App = () => {
return (
<Refine
notificationProvider={customNotificationProvider}
/* ... */
>
{/* ... */}
</Refine>
);
};
import { Refine } from "@refinedev/core";

const App = () => {
return (
<Refine
notificationProvider={customNotificationProvider}
/* ... */
>
{/* ... */}
</Refine>
);
};
This way, you can control the notifications displayed in your application without creating a notification provider from scratch. For more information on creating a custom notification provider, you can refer to the refine documentation (https://refine.dev/docs/api-reference/core/providers/notification-provider/#creating-an-notificationprovider). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Notification Provider | refine
refine let's you set a notification API by providing the notificationProvider property to the `` component.
kapa.ai
kapa.ai15mo ago
<@486442088280358912> kapa.ai is still learning and improving, please let us how it did by reacting below
intense-chocolate
intense-chocolate15mo ago
https://refine.dev/docs/api-reference/core/hooks/authentication/useLogin/ success: A boolean indicating whether the operation was successful. If success is false, a notification will be shown. error: If has a value, a notification will be shown with the error message and name. when you have notification provider, it will automatically show notification. you can customize error object instead of showing your own.
return {
success: false,
redirectTo: '/login',
error: {
"name": "Login Failed",
"message": error.response.data.message,
}
}
return {
success: false,
redirectTo: '/login',
error: {
"name": "Login Failed",
"message": error.response.data.message,
}
}