Default placement of built-in notifications with antd

I would like to change the default placement of antd notifications.

5 Replies

Hi @Gernotron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the default placement of Ant Design notifications in refine, you can use the notification.config() method from Ant Design. However, there's an important consideration when using this with refine's built-in notification provider. By default, refine's Ant Design notification provider uses the static notification methods, which don't automatically pick up theme changes or custom configurations. To ensure your notifications follow the current theme and custom configurations, you should use the useNotificationProvider hook along with the <App /> component from Ant Design. Here's how you can set this up: 1. First, wrap your app with the Ant Design <App /> component:

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
          notificationProvider={useNotificationProvider}
          // ... other props
        >
          {/* ... */}
        </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
          notificationProvider={useNotificationProvider}
          // ... other props
        >
          {/* ... */}
        </Refine>
      </AntdApp>
    </ConfigProvider>
  );
};

2. Then, you can use the notification.config() method to set the default placement:

import { notification } from "antd";

// Place this before your App component
notification.config({
  placement: 'bottomRight', // or any other valid placement
});

import { notification } from "antd";

// Place this before your App component
notification.config({
  placement: 'bottomRight', // or any other valid placement
});

This setup ensures that your notifications will respect both the theme settings and the custom configuration you've set. For more information on Ant Design integration with refine, you can check the Ant Design Introduction documentation. Remember that if you need more control over individual notifications, you can always use the useNotification hook to manually trigger notifications with custom settings. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14h ago

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

magic-amberOP•14h ago

@kapa.ai Unfortunately, the proposed solution does not work. The notification still appears at the top right.

kapa.ai•14h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous answer. You're right that the proposed solution doesn't work as expected. After reviewing the knowledge sources more carefully, I can provide a more accurate explanation. The issue you're experiencing is a known bug in refine's Ant Design integration. The built-in notificationProvider for Ant Design in refine doesn't respect the global configuration set by notification.config(). This issue was reported and discussed in a GitHub issue: BUG] Antd notificationProvider notifications don't follow theme style. The current workaround, as suggested in the issue, is to wrap the <Refine> component with Ant Design's <App> component. Here's how you can implement this:

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
          notificationProvider={useNotificationProvider}
          // ... other props
        >
          {/* ... */}
        </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
          notificationProvider={useNotificationProvider}
          // ... other props
        >
          {/* ... */}
        </Refine>
      </AntdApp>
    </ConfigProvider>
  );
};

This setup allows the notifications to access the context and respect the theme settings. However, it's important to note that this solution doesn't directly address changing the default placement of notifications. If you need more control over the placement of individual notifications, you can use the useNotification hook to manually trigger notifications with custom settings, including placement. For a long-term solution, the refine team is aware of this issue and may address it in future updates. If this is a critical issue for your project, you might want to consider creating a custom notification provider that gives you more control over the notification settings. I apologize again for any confusion caused by my previous response. Thank you for bringing this to our attention, as it helps improve the accuracy of the information provided. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14h ago

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

Default placement of built-in notifications with antd

Did you find this page helpful?