App Component of antd --> Global scene (react query scene) #46595
Replies: 2 comments 1 reply
-
and there is still not the answer for this question |
Beta Was this translation helpful? Give feedback.
-
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:
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. |
Beta Was this translation helpful? Give feedback.
-
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")}
/>
);
};`
Beta Was this translation helpful? Give feedback.
All reactions