contributors
- Components Overview
- Changelogv6.1.4
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Common props ref:Common props
This component provides some static methods, with usage and arguments as following:
message.success(content, [duration], onClose)message.error(content, [duration], onClose)message.info(content, [duration], onClose)message.warning(content, [duration], onClose)message.loading(content, [duration], onClose)| Argument | Description | Type | Default |
|---|---|---|---|
| content | The content of the message | ReactNode | config | - |
| duration | Time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 1.5 |
| onClose | Specify a function that will be called when the message is closed | function | - |
afterClose can be called in thenable interface:
message[level](content, [duration]).then(afterClose)message[level](content, [duration], onClose).then(afterClose)where level refers one static methods of message. The result of then method will be a Promise.
Supports passing parameters wrapped in an object:
message.open(config)message.success(config)message.error(config)message.info(config)message.warning(config)message.loading(config)The properties of config are as follows:
| Property | Description | Type | Default | | --- | --- | --- | --- | --- | | className | Customized CSS class | string | - | | classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | | content | The content of the message | ReactNode | - | | duration | Time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 | | icon | Customized Icon | ReactNode | - | | pauseOnHover | keep the timer running or not on hover | boolean | true | - | | key | The unique identifier of the Message | string | number | - | | style | Customized inline style | CSSProperties | - | | styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | | onClick | Specify a function that will be called when the message is clicked | function | - | | onClose | Specify a function that will be called when the message is closed | function | - |
Methods for global configuration and destruction are also provided:
message.config(options)message.destroy()use
message.destroy(key)to remove a message.
When you use
ConfigProviderfor 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.
message.config({top:100,duration:2,maxCount:3,rtl:true,prefixCls:'my-message',});
| Argument | Description | Type | Default | Version |
|---|---|---|---|---|
| duration | Time before auto-dismiss, in seconds | number | 3 | |
| getContainer | Return the mount node for Message, but still display at fullScreen | () => HTMLElement | () => document.body | |
| maxCount | Max message show, drop oldest if exceed limit | number | - | |
| prefixCls | The prefix className of message node | string | ant-message | 4.5.0 |
| rtl | Whether to enable RTL mode | boolean | false | |
| top | Distance from top | string | number | 8 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| contentBg | Background color of Message | string | #ffffff |
| contentPadding | Padding of Message | Padding<string | number> | undefined | 9px 12px |
| zIndexPopup | z-index of Message | number | 2010 |
locale/prefixCls/theme in message?antd will dynamic create React instance by ReactDOM.render when call message methods. Whose context is different with origin code located context.
When you need context info (like ConfigProvider context), you can use message.useMessage to get api instance and contextHolder node. And put it in your children:
const[api, contextHolder]= message.useMessage();return(<Context1.Providervalue="Ant">{/* contextHolder is inside Context1 which means api will get value of Context1 */}{contextHolder}<Context2.Providervalue="Design">{/* contextHolder is outside Context2 which means api will **not** get value of Context2 */}</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
useMessageand other methods that need to manually implant contextHolder.
You can config with ConfigProvider.config
Use message.useMessage to get contextHolder with context accessible issue. Please note that, we recommend to use top level registration instead of message static method, because static method cannot consume context, and ConfigProvider data will not work.
Customize message display duration from default 3s to 10s.
message provides a promise interface for onClose. The above example will display a new message when the old message is about to close.
You can customize the semantic dom style of messages by passing objects/functions through classNames and styles.
Static methods cannot consume Context provided by ConfigProvider. When enable layer, they may also cause style errors. Please use hooks version or App provided instance first.
Messages of success, error and warning types.
Display a global loading indicator, which is dismissed by itself asynchronously.
The style and className are available to customize Message.
Update message content with unique key.