Message

Display global messages as feedback in response to user operations.

When to use

To provide feedback such as success, warning, error etc.
A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.

Examples

Hooks usage (recommended)

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 duration

Customize message display duration from default 3s to 10s.

Message with loading indicator

Display a global loading indicator, which is dismissed by itself asynchronously.

Custom semantic styles

You can customize the semantic dom style of messages with classNames and styles.

Static method (deprecated)

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.

Other types of message

Messages of success, error and warning types.

Stack

Stack configuration, disabled by default. Messages will be stacked when the amount is over threshold. Only the latest message is shown in the collapsed stack.

Promise interface

message provides a promise interface for onClose. The above example will display a new message when the old message is about to close.

Update Message Content

Update message content with unique key.

API

message and message.useMessage are exported from @ceebee/ui/client.

Message

Property	Description	Type	Default	Version
`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`	`-`	—
`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>`	`-`	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`	`-`	-
`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
`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`	`-`	-