Notification

When To Use

To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:

• A notification with complex content.
• A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
• A notification that is pushed by the application.

Examples

<code src="./demo/hooks.tsx">Hooks usage (recommended)</code> <code src="./demo/duration.tsx">Duration after which the notification box is closed</code> <code src="./demo/with-icon.tsx">Notification with icon</code> <code src="./demo/with-btn.tsx">Custom close button</code> <code src="./demo/custom-icon.tsx">Customized Icon</code> <code src="./demo/placement.tsx">Placement</code> <code src="./demo/custom-style.tsx">Customized style</code> <code src="./demo/update.tsx">Update Message Content</code> <code src="./demo/stack.tsx" version="5.10.0">Stack</code> <code src="./demo/show-with-progress.tsx" version="5.18.0">Show with progress</code> <code src="./demo/basic.tsx">Static Method (deprecated)</code> <code src="./demo/progress-color.tsx">Customize progress bar color</code> <code src="./demo/component-token.tsx" debug>Component Token</code> <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>

API

Common props ref：Common props

• notification.success(config)
• notification.error(config)
• notification.info(config)
• notification.warning(config)
• notification.open(config)
• notification.destroy(key?: String)

The properties of config are as follows:

• notification.useNotification(config)

The properties of config are as follows:

notification also provides a global config() method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options when displaying.

ClosableType

Global configuration

notification.config(options)

When you use ConfigProvider for global configuration, the system will automatically start RTL mode by default.(4.3.0+)

When you want to use it alone, you can start the RTL mode through the following settings.

notification.config

notification.config({
  placement: 'bottomRight',
  bottom: 50,
  duration: 3,
  rtl: true,
});

Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

Design Token

<ComponentTokenTable component="Notification"></ComponentTokenTable>

FAQ

Why I can not access context, redux, ConfigProvider locale/prefixCls/theme in notification? {#faq-context-redux}

antd will dynamic create React instance by ReactDOM.render when call notification methods. Whose context is different with origin code located context.

When you need context info (like ConfigProvider context), you can use notification.useNotification to get api instance and contextHolder node. And put it in your children:

const [api, contextHolder] = notification.useNotification();

return (
  <Context1.Provider value="Ant">
    {contextHolder}
    <Context2.Provider value="Design">
    </Context2.Provider>
  </Context1.Provider>
);

Note: You must insert contextHolder into your children with hooks. You can use origin method if you do not need context connection.

App Package Component can be used to simplify the problem of useNotification and other methods that need to manually implant contextHolder.

How to set static methods prefixCls ？ {#faq-set-prefix-cls}

You can config with ConfigProvider.config