# Message

- Page: https://jiguang132.com/resources/arco-design/docs/message
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Lightweight global feedback triggered by user actions.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: The simplest usage.
- **Type**: There are 5 different types of Message, `info`, `success`, `warning`, `error`, `normal`.
- **Update**: By specifying the `id`, the existing Message can be updated.
- **Position**: Message has 2 different positions.
- **Update duration**: By specifying the `id`, the `duration` attribute of the existing Message can be updated.
- **Manual close**: `Message.xxx()` will return a function, use this function to close the notification.
- **Closable**: Set `closable` to show the close button.
- **Hooks - Usage**: You can use `useMessage` to create a dialog that can read the context. But the `message` rendered by `useMessage` is mounted where the `contextHolder` is. The container cannot be modified via `getContainer()`.
- **Custom animation effects**: You can implement custom animations through `transitionClassNames` and `transitionTimeout` The animation implementation is based on [react-transition-group](https://reactcommunity.org/react-transition-group/css-transition)

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Message

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|closable|Whether to show the close button|boolean |`true`|-|
|showIcon|Whether to show the icon|boolean |`true`|-|
|duration|Automatic shutdown time, the unit is `ms`|number |`3000`|-|
|id|The unique identifier of the current message, which can be used to update the message|string |`-`|-|
|transitionClassNames|ClassNames of react-transition-group of the message pop-up animation, see `classNames`|string |`-`|-|
|position|The position of the message|'top' \| 'bottom' |`-`|-|
|closeIcon|Custom the close button on top-right of the drawer dialog|ReactNode |`-`|2.50.0|
|icon|Custom icon|ReactNode |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|content|Message content|ReactNode \| string  **(Required)**|`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|transitionTimeout|timeout of `react-transition-group` of the message pop-up animation, see `timeout`|{enter?: number;exit?: number;} |`{enter: 100, exit: 300}`|2.43.0|
|onClose|Callback when close|() => void |`-`|-|

### Methods

- `Message.info(content: String)` / `Message.info(config: Object)`
- `Message.success(content: String)` / `Message.success(config: Object)`
- `Message.warning(content: String)` / `Message.warning(config: Object)`
- `Message.error(content: String)` / `Message.error(config: Object)`
- `Message.normal(content: String)` / `Message.normal(config: Object)`
- `Message.loading(content: String)` / `Message.loading(config: Object)`
- `Message.clear()`

### Global config

`Message.config(options)`

|Property|Description|Type|Default|
|---|:---:|:---:|---:|
|maxCount|Maximum number of notifications|`number`|`-`|
|getContainer|Container of the notification|`() => HTMLElement`|`() => document.body`|
|duration|The time when the notification is automatically closed|`number`|`3000`|
|prefixCls|ClassName prefix|`string`|`arco`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt