App

Application wrapper for some global usages.

When To Use

Provide reset styles based on .ant-app element.
You could use static methods of message/notification/Modal form 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.

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

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

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

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

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

Global scene (redux scene)

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

// sub page
import { Button, Space } from 'antd';
import React from 'react';
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

App

Property	Description	Type	Default	Version
message	Global config for Message	MessageConfig	-	5.3.0
notification	Global config for Notification	NotificationConfig	-	5.3.0

Design Token

Global Token

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.

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

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

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

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

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

Global scene (redux scene)

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

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

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

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

Property

Description

Type

Default

Version

message

Global config for Message

MessageConfig

5.3.0

notification

Global config for Notification

NotificationConfig

5.3.0

Namu Design

App

Namu Design

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

Global Token

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

Global Token

AppChangelog

AppChangelog

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

Global Token

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

Global Token

App

App