2016-07-04 10:44:55 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Feedback
2016-07-04 10:44:55 +08:00
noinstant: true
2016-09-21 11:28:38 +08:00
title: Message
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JjZBT6N1MusAAAAAAAAAAAAADrJ8AQ/original
2022-11-09 12:28:04 +08:00
demo:
cols: 2
2016-07-04 10:44:55 +08:00
---
2017-09-10 21:47:02 +08:00
Display global messages as feedback in response to user operations.
2016-07-04 10:44:55 +08:00
## When To Use
2017-09-10 21:47:02 +08:00
- To provide feedback such as success, warning, error etc.
2016-07-04 10:44:55 +08:00
- A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/hooks.tsx" > Hooks usage (recommended)< / code >
< code src = "./demo/other.tsx" > Other types of message< / code >
< code src = "./demo/duration.tsx" > Customize duration< / code >
< code src = "./demo/loading.tsx" > Message with loading indicator< / code >
< code src = "./demo/thenable.tsx" > Promise interface< / code >
< code src = "./demo/custom-style.tsx" > Customized style< / code >
< code src = "./demo/update.tsx" > Update Message Content< / code >
< code src = "./demo/info.tsx" > Normal prompt< / code >
< code src = "./demo/render-panel.tsx" debug > _InternalPanelDoNotUseOrYouWillBeFired< / code >
2016-07-04 10:44:55 +08:00
## API
2017-03-19 14:16:39 +08:00
This components provides some static methods, with usage and arguments as following:
2017-10-14 14:28:57 +08:00
- `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)`
2016-07-04 10:44:55 +08:00
2019-11-20 17:46:50 +08:00
| Argument | Description | Type | Default |
| --- | --- | --- | --- |
2020-10-09 10:08:52 +08:00
| content | The content of the message | ReactNode \| config | - |
2020-07-02 15:33:42 +08:00
| 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 | - |
2016-07-04 10:44:55 +08:00
2018-09-02 17:25:16 +08:00
`afterClose` can be called in thenable interface:
2018-06-24 17:09:18 +08:00
2018-05-25 20:41:07 +08:00
- `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.
2019-09-05 10:15:14 +08:00
Supports passing parameters wrapped in an object:
2018-09-02 17:25:16 +08:00
- `message.open(config)`
2019-09-05 10:15:14 +08:00
- `message.success(config)`
- `message.error(config)`
- `message.info(config)`
- `message.warning(config)`
- `message.loading(config)`
2018-09-02 17:25:16 +08:00
The properties of config are as follows:
2019-11-20 17:46:50 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
2020-10-21 10:33:43 +08:00
| className | Customized CSS class | string | - |
2020-07-02 15:33:42 +08:00
| content | The content of the message | ReactNode | - |
| duration | Time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 |
2019-11-20 17:46:50 +08:00
| icon | Customized Icon | ReactNode | - |
2020-07-02 15:33:42 +08:00
| key | The unique identifier of the Message | string \| number | - |
| style | Customized inline style | [CSSProperties ](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794 ) | - |
2020-12-03 10:58:11 +08:00
| onClick | Specify a function that will be called when the message is clicked | function | - |
2021-03-01 19:20:48 +08:00
| onClose | Specify a function that will be called when the message is closed | function | - |
2018-09-02 17:25:16 +08:00
### Global static methods
Methods for global configuration and destruction are also provided:
- `message.config(options)`
- `message.destroy()`
2020-08-06 13:34:18 +08:00
> use `message.destroy(key)` to remove a message。
2018-09-02 17:25:16 +08:00
#### message.config
2017-03-19 02:07:39 +08:00
2020-05-26 09:08:07 +08:00
> When you use `ConfigProvider` for global configuration, the system will automatically start RTL mode by default.(4.3.0+)
2020-04-30 10:52:44 +08:00
>
> When you want to use it alone, you can start the RTL mode through the following settings.
2016-07-04 10:44:55 +08:00
```js
message.config({
top: 100,
duration: 2,
2018-04-20 15:40:43 +08:00
maxCount: 3,
2020-04-04 13:35:36 +08:00
rtl: true,
2020-07-14 11:14:46 +08:00
prefixCls: 'my-message',
2016-07-04 10:44:55 +08:00
});
```
2020-07-14 11:14:46 +08:00
| Argument | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2021-06-22 13:33:01 +08:00
| duration | Time before auto-dismiss, in seconds | number | 3 | |
2020-07-14 11:14:46 +08:00
| getContainer | Return the mount node for Message | () => 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 |
2020-10-21 10:33:43 +08:00
| rtl | Whether to enable RTL mode | boolean | false | |
2021-06-22 13:33:01 +08:00
| top | Distance from top | number | 8 | |
2020-07-15 19:51:56 +08:00
## FAQ
2022-11-29 10:39:57 +08:00
### Why I can not access context, redux, ConfigProvider `locale/prefixCls/theme` in message?
2020-07-15 19:51:56 +08:00
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:
```tsx
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.
2021-02-09 21:49:15 +08:00
### How to set static methods prefixCls ?
2022-12-22 14:12:26 +08:00
You can config with [`ConfigProvider.config` ](/components/config-provider#configproviderconfig-4130 )