App

When To Use

Provide reset styles based on .ant-app element.
You could use static methods of message/notification/Modal from useApp without writing contextHolder manually.

Examples

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/config.tsx">Hooks config</code>

How to use

Basic usage

App provides upstream and downstream method calls through Context, because useApp needs to be used as a subcomponent, we recommend encapsulating App at the top level in the application.

tsx

import React from 'react';
import { App } from 'antd';

const MyPage: React.FC = () => {
  const { message, notification, modal } = App.useApp();
  message.success('Good!');
  notification.info({ title: 'Good' });
  modal.warning({ title: 'Good' });
  // ....
  // other message, notification, modal static function
  return <div>Hello world</div>;
};

const MyApp: React.FC = () => (
  <App>
    <MyPage />
  </App>
);

export default MyApp;

Note: App.useApp must be available under App.

Sequence with ConfigProvider

The App component can only use the token in the ConfigProvider, if you need to use the Token, the ConfigProvider and the App component must appear in pairs.

tsx

<ConfigProvider theme={{ ... }}>
  <App>
    ...
  </App>
</ConfigProvider>

Embedded usage scenarios (if not necessary, try not to do nesting) {#embedded-usage-scenarios}

tsx

<App>
  <Space>
    ...
    <App>...</App>
  </Space>
</App>

Global scene (redux scene) {#global-scene-redux}

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 };

tsx

// sub page
import React from 'react';
import { Button, Space } from 'antd';

import { message } from './store';

export default () => {
  const showMessage = () => {
    message.success('Success!');
  };

  return (
    <Space>
      <Button type="primary" onClick={showMessage}>
        Open message
      </Button>
    </Space>
  );
};

API

Common props ref：Common props

This component is available since [email protected].

Property	Description	Type	Default	Version	Global Config
component	Config render element, if `false` will not create DOM node	ComponentType \| false	div	5.11.0	×
message	Global config for Message	MessageConfig	-	5.3.0	×
notification	Global config for Notification	NotificationConfig	-	5.3.0	×

Design Token

FAQ

CSS Var doesn't work inside `<App component={false}>` {#faq-css-var-component-false}

Ant Design v6 uses CSS variables by default. App needs a valid HTML element to hold its CSS variable class name. When component is false, App only provides context without rendering a root DOM node, so no App root class name or default styles are applied. The className, rootClassName, and style properties cannot be applied in this mode and trigger a development warning. Keep the default div or specify another valid element when these styles are required.

App