Notification

Prompt notification message globally.

When to use

To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:

A notification with complex content.
A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
A notification that is pushed by the application.

Examples

Hooks usage (recommended)

Use notification.useNotification to get contextHolder with context accessible issue. Please note that, we recommend to use top level registration instead of notification static method, because static method cannot consume context, and ConfigProvider data will not work.

Notification with icon

A notification box with a icon at the left side.

Customized Icon

The icon can be customized to any react node.

Update Message Content

Update content with unique key.

Show with progress

Show progress bar for auto-closing notification.

Customize progress bar color

Customize the progress bar color by configuring the component token.

Duration after which the notification box is closed

Duration can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0, the notification box will never close automatically.

Custom close button

To customize the style or font of the close button.

Placement

A notification box can appear from the top bottom topLeft topRight bottomLeft or bottomRight of the viewport via placement.

Stack

Stack configuration, enabled by default. Notifications will be stacked when the amount is over threshold. Up to 3 notifications are shown in the collapsed stack.

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.

Custom semantic styles

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

API

notification and notification.useNotification are exported from @ceebee/ui/client.

Notification

Property	Description	Type	Default	Version
`actions`	Customized button group	`ReactNode`	`-`	5.24.0
`btn`	Customized close button group, please use actions instead	`ReactNode`	`-`	-
`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>`	`-`	—
`closable`	Whether to show the close button	`boolean \| ClosableType`	`true`	-
`closeIcon`	Custom close icon	`ReactNode`	`true`	5.7.0: close button will be hidden when setting to null or false
`description`	The content of notification box (required)	`ReactNode`	`-`	-
`duration`	Time in seconds before Notification is closed. When set to 0 or false, it will never be closed automatically	`number \| false`	`4.5`	-
`showProgress`	Show progress bar for auto-closing notification	`boolean`	`—`	5.18.0
`pauseOnHover`	keep the timer running or not on hover	`boolean`	`true`	5.18.0
`icon`	Customized icon	`ReactNode`	`-`	-
`key`	The unique identifier of the Notification	`string`	`-`	-
`title`	The title of notification box	`ReactNode`	`-`	6.0.0
`message`	The title of notification box (deprecated), please use title instead	`ReactNode`	`-`	-
`placement`	Position of Notification, can be one of top \| topLeft \| topRight \| bottom \| bottomLeft \| bottomRight	`string`	`topRight`	-
`role`	The semantics of notification content recognized by screen readers. The default value is alert. When set as the default value, the screen reader will promptly interrupt any ongoing content reading and prioritize the notification content for immediate attention.	`alert \| status`	`alert`	5.6.0
`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>`	`-`	—
`onClick`	Specify a function that will be called when the notification is clicked	`function`	`-`	-
`onClose`	Trigger when notification closed	`function`	`-`	-
`props`	An object that can contain data-, aria-, or role props, to be put on the notification div. This currently only allows data-testid instead of data-* in TypeScript. See https://github.com/microsoft/TypeScript/issues/28960.	`Object`	`-`	-
`bottom`	Distance from the bottom of the viewport, when placement is bottom bottomRight or bottomLeft (unit: pixels)	`number`	`24`	—
`closeIcon`	Custom close icon	`ReactNode`	`true`	5.7.0: close button will be hidden when setting to null or false
`getContainer`	Return the mount node for Notification	`() => HTMLNode`	`() => document.body`	—
`placement`	Position of Notification, can be one of top \| topLeft \| topRight \| bottom \| bottomLeft \| bottomRight	`string`	`topRight`	—
`showProgress`	Show progress bar for auto-closing notification	`boolean`	`—`	5.18.0
`pauseOnHover`	keep the timer running or not on hover	`boolean`	`true`	5.18.0
`rtl`	Whether to enable RTL mode	`boolean`	`false`	—
`stack`	Notifications will be stacked when amount is over threshold	`boolean \| { threshold: number }`	`{ threshold: 3 }`	5.10.0
`top`	Distance from the top of the viewport, when placement is top topRight or topLeft (unit: pixels)	`number`	`24`	—
`maxCount`	Max Notification show, drop oldest if exceed limit	`number`	`-`	4.17.0

ClosableType

Property	Description	Type	Default	Version
`closeIcon`	Custom close icon	`ReactNode`	`undefined`	-
`onClose`	Trigger when notification close	`Function`	`undefined`	-

Global configuration

Property	Description	Type	Default	Version
`bottom`	Distance from the bottom of the viewport, when placement is bottom bottomRight or bottomLeft (unit: pixels)	`number`	`24`	—
`closeIcon`	Custom close icon	`ReactNode`	`true`	5.7.0: close button will be hidden when setting to null or false
`duration`	Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically	`number`	`4.5`	—
`getContainer`	Return the mount node for Notification, but still display at fullScreen	`() => HTMLNode`	`() => document.body`	—
`placement`	Position of Notification, can be one of top topLeft topRight bottom bottomLeft bottomRight	`string`	`topRight`	—
`showProgress`	Show progress bar for auto-closing notification	`boolean`	`—`	5.18.0
`pauseOnHover`	keep the timer running or not on hover	`boolean`	`true`	5.18.0
`rtl`	Whether to enable RTL mode	`boolean`	`false`	—
`top`	Distance from the top of the viewport, when placement is top topRight or topLeft (unit: pixels)	`number`	`24`	—
`maxCount`	Max Notification show, drop oldest if exceed limit	`number`	`-`	4.17.0