flat-fuchsia•16mo 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?

4 Replies

kapa.ai•16mo 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•16mo 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•16mo ago

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

extended-salmon•16mo 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,
        }
      }