Message
Message
Importimport { message } from 'antd'; |
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)| Property | 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 | 3 |
| 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 | Version | Global Config |
|---|---|---|---|---|---|
| className | Customized CSS class | string | - | - | 5.7.0 |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | 6.0.0 |
| 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 | - | - | 5.7.0 |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | 6.0.0 |
| 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',});
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| 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 | × | |
| stack | Messages will be stacked when amount is over threshold. Only the latest message is shown in the collapsed stack | boolean | { threshold: number } | false | 6.4.0 | × |
| 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgElevated | Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc. | string | #ffffff |
| colorError | Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc. | string | #ff4d4f |
| colorInfo | Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens. | string | #1677ff |
| colorSuccess | Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens. | string | #52c41a |
| 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) |
| colorTextHeading | Control the font color of heading. | string | rgba(0,0,0,0.88) |
| colorWarning | Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens. | string | #faad14 |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| boxShadow | Control the box shadow style of an element. | string | 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05) |
| boxShadowTertiary | Control the tertiary box shadow style of an element. | string | 0 1px 2px 0 rgba(0,0,0,0.05), 0 1px 6px -1px rgba(0,0,0,0.03), 0 2px 4px 0 rgba(0,0,0,0.03) |
| controlHeightLG | LG component height | number | 40 |
| 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 |
| fontSizeLG | Large font size | number | 16 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineHeightLG | Line height of large text. | number | 1.5 |
| margin | Control the margin of an element, with a medium size. | number | 16 |
| marginLG | Control the margin of an element, with a large size. | number | 24 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| marginXXL | Control the margin of an element, with the largest size. | number | 48 |
| motionDurationFast | Motion speed, fast speed. Used for small element animation interaction. | string | 0.1s |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseInOut | Preset motion curve. | string | |
| paddingContentHorizontalLG | Control the horizontal padding of content element, suitable for large screen devices. | number | 24 |
| paddingLG | Control the large padding of the element. | number | 24 |
| paddingMD | Control the medium padding of the element. | number | 20 |
| paddingSM | Control the small padding of the element. | number | 12 |
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.Provider value="Ant">{/* contextHolder is inside Context1 which means api will get value of Context1 */}{contextHolder}<Context2.Provider value="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