App Component of antd --> Global scene (react query scene)

[MalikOwais123]

I am working on theme switching using Config Provider given by antd, although i have successfully implement it.

But there is a catch, the Static methods of antd like Notification,Message.Modal does not affect on theme, without context holder.
In my case i need to use message outside of React component it is my react query hook,

I read the documentation of antd: it provides the global scene for redux here

My implementation:

src/config/AntdApp.tsx

`// Entry component
import { App } from "antd";
import type { MessageInstance } from "antd/es/message/interface";
import type { ModalStaticFunctions } from "antd/es/modal/confirm";
import type { NotificationInstance } from "antd/es/notification/interface";

let message: MessageInstance;
let notification: NotificationInstance;
let modal: Omit<ModalStaticFunctions, "warn">;

export default () => {
const staticFunction = App.useApp();
message = staticFunction.message;
modal = staticFunction.modal;
notification = staticFunction.notification;
return null;
};

export { message, modal, notification };
`

Usage:

My Component:
`import { message } from "@/config/AntdApp";

const Classes = () => {
return (

<Button
onClick={() => message.info("asd")}
/>

);
};`

[quocvuong2000]

and there is still not the answer for this question

[Riyazul555]

It seems like you're trying to access the Ant Design message component outside of a React component, and you're using a custom hook to provide access to it. However, your implementation might not work as expected because hooks like useApp aren't meant to be used outside of React components.

To achieve your goal of using Ant Design components outside of React components, you might need to look into alternative solutions. One approach is to create a separate module that initializes and exports the Ant Design message instance, and then import and use it wherever needed.

Here's an example of how you could refactor your code:

// src/config/AntdMessage.ts

import { message as antdMessage, MessageInstance } from 'antd';

// Initialize Ant Design message instance
const message: MessageInstance = antdMessage;

export default message;


Then, in your component or wherever you need to use the message:

// MyComponent.js

import message from '@/config/AntdMessage';

const MyComponent = () => {
  const handleClick = () => {
    message.info('Hello, world!');
  };

  return (
    <Button onClick={handleClick}>Click me</Button>
  );
};

export default MyComponent;

This way, you have a separate module (AntdMessage) responsible for initializing and exporting the Ant Design message instance, and you can import and use it in your components as needed.

Remember to adjust the import paths and file names according to your project structure. Also, ensure that you're using the correct versions of the Ant Design components and that they support the method of integration you choose.

[R3flector]

Warning: [antd: message] Static function can not consume context like dynamic theme. Please use 'App' component instead.

same warnign anyway