Message

Lightweight global feedback triggered by user actions.

Install

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

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`