Is it possible to customize the notifications style?

I would like to customize the placement of the notifications, im using antd

5 Replies

Hi @internal_server_error_enjoyer. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to customize the notifications style and placement when using Ant Design with refine. Here's how you can do it: 1. Customizing the placement: You can customize the placement of notifications by using the useNotificationProvider hook from @refinedev/antd and passing it to the notificationProvider prop of the <Refine> component. Then, you can wrap your app with the <App> component from Ant Design to ensure the notifications receive the current theme configuration. Here's an example of how to set this up:

   import { Refine } from "@refinedev/core";
   import { useNotificationProvider, RefineThemes } from "@refinedev/antd";
   import { ConfigProvider, App as AntdApp } from "antd";

   const App = () => {
     return (
       <ConfigProvider theme={RefineThemes.Blue}>
         <AntdApp>
           <Refine
             // ...other props
             notificationProvider={useNotificationProvider}
           >
             {/* ... */}
           </Refine>
         </AntdApp>
       </ConfigProvider>
     );
   };

   import { Refine } from "@refinedev/core";
   import { useNotificationProvider, RefineThemes } from "@refinedev/antd";
   import { ConfigProvider, App as AntdApp } from "antd";

   const App = () => {
     return (
       <ConfigProvider theme={RefineThemes.Blue}>
         <AntdApp>
           <Refine
             // ...other props
             notificationProvider={useNotificationProvider}
           >
             {/* ... */}
           </Refine>
         </AntdApp>
       </ConfigProvider>
     );
   };

Ant Design Integration - Notifications (https://refine.dev/docs/ui-integrations/ant-design/introduction/#notifications) 2. Customizing the style and placement: You can further customize the style and placement of notifications by passing options to the open function from the useNotification hook. Here's an example:

   import { useNotification } from "@refinedev/core";

   const { open } = useNotification();

   open({
     type: "success",
     message: "Notification Title",
     description: "This is the content of the notification.",
     placement: "topRight", // You can change this to customize placement
     style: {
       // Custom styles can be added here
       background: "green",
       color: "#fff",
     },
   });

   import { useNotification } from "@refinedev/core";

   const { open } = useNotification();

   open({
     type: "success",
     message: "Notification Title",
     description: "This is the content of the notification.",
     placement: "topRight", // You can change this to customize placement
     style: {
       // Custom styles can be added here
       background: "green",
       color: "#fff",
     },
   });

Built-in Notification Providers (https://refine.dev/docs/guides-concepts/notifications/#built-in-notification-providers) By using these methods, you can customize both the style and placement of notifications in your refine application using Ant Design. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@492429659154415657> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

like-goldOP•4w ago

@kapa.ai Yes, but the built in notifications, if i create, edit something

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're asking about customizing the built-in notifications that appear automatically when you perform actions like creating or editing records in refine with Ant Design. Let me clarify this for you: For the built-in notifications that refine automatically displays after CRUD operations (like create, edit, delete), you can customize their appearance and behavior by using the notificationProvider prop on the <Refine> component. Here's how you can customize these built-in notifications: 1. First, make sure you're using the useNotificationProvider from @refinedev/antd:

import { useNotificationProvider } from "@refinedev/antd";

import { useNotificationProvider } from "@refinedev/antd";

2. Then, wrap your <Refine> component with Ant Design's <App> component and pass the useNotificationProvider to the notificationProvider prop:

import { Refine } from "@refinedev/core";
import { useNotificationProvider } from "@refinedev/antd";
import { App as AntdApp } from "antd";

const App = () => {
  return (
    <AntdApp>
      <Refine
        // ...other props
        notificationProvider={useNotificationProvider}
      >
        {/* ... */}
      </Refine>
    </AntdApp>
  );
};

import { Refine } from "@refinedev/core";
import { useNotificationProvider } from "@refinedev/antd";
import { App as AntdApp } from "antd";

const App = () => {
  return (
    <AntdApp>
      <Refine
        // ...other props
        notificationProvider={useNotificationProvider}
      >
        {/* ... */}
      </Refine>
    </AntdApp>
  );
};

This setup ensures that the built-in notifications will use the current theme and can be customized as mentioned in the Ant Design Integration documentation (https://refine.dev/docs/ui-integrations/ant-design/introduction/#notifications). 3. To customize the placement or style of these built-in notifications, you can modify the useNotificationProvider implementation. However, this would require creating a custom notification provider, which is a more advanced customization. If you need to customize specific notifications for certain actions, you can use the successNotification and errorNotification props on data hooks. For example:

useForm({
  successNotification: (data, values, resource) => {
    return {
      message: `Post Successfully created with ${data.title}`,
      description: "Success with no errors",
      type: "success",
      placement: "topRight", // Customize placement here
    };
  },
});

useForm({
  successNotification: (data, values, resource) => {
    return {
      message: `Post Successfully created with ${data.title}`,
      description: "Success with no errors",
      type: "success",
      placement: "topRight", // Customize placement here
    };
  },
});

This approach allows you to customize notifications for specific actions as shown in the useForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#successnotification). Remember, for these customizations to work properly, you need to ensure you're using the notificationProvider setup as described in steps 1 and 2. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@492429659154415657> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Is it possible to customize the notifications style?

Did you find this page helpful?