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

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)

tsx

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

Global scene (redux scene)

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 antd@5.1.0.

Property	Description	Type	Default	Version
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

Global TokenHow to use?

Token Name	Description	Type	Default Value
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0,0,0,0.88)
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
lineHeight	Line height of text.	number	1.5714285714285714

FAQ

CSS Var doesn't work inside `<App component={false}>`

Make sure the App component is a valid html tag, so when you're turning on CSS variables, there's a container to hold the CSS class name. If not set, it defaults to the div tag. If set to false, no additional DOM nodes will be created, and no default styles will be provided.

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

Basic

Get instance for message, notification, modal.

Hooks config

Config for message, notification.

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)

tsx

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

Global scene (redux scene)

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 antd@5.1.0.

App

Property	Description	Type	Default	Version
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

Global TokenHow to use?

Token Name	Description	Type	Default Value
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0,0,0,0.88)
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
lineHeight	Line height of text.	number	1.5714285714285714

FAQ

CSS Var doesn't work inside `<App component={false}>`

Make sure the App component is a valid html tag, so when you're turning on CSS variables, there's a container to hold the CSS class name. If not set, it defaults to the div tag. If set to false, no additional DOM nodes will be created, and no default styles will be provided.

App

App

When To Use

Examples

How to use

Basic usage

Sequence with ConfigProvider

Embedded usage scenarios (if not necessary, try not to do nesting)

Global scene (redux scene)

API

App

Design Token

FAQ

CSS Var doesn't work inside <App component={false}>

When To Use

Examples

How to use

Basic usage

Sequence with ConfigProvider

Embedded usage scenarios (if not necessary, try not to do nesting)

Global scene (redux scene)

API

App

Design Token

FAQ

CSS Var doesn't work inside <App component={false}>

CSS Var doesn't work inside `<App component={false}>`

CSS Var doesn't work inside `<App component={false}>`