# Notification

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

Display a notification message globally.

## 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 Notification: `info`, `success`, `warning`, `error`, `normal`.
- **Update**: Specifying `id` to update the existing notification.
- **Update duration**: Specifying `id` to update the existing notification's duration.
- **Custom action buttons**: You can add operation buttons by specifying the `btn` field.
- **Customize style**: You can set `style` and `className` to customize the style.
- **Position**: Notification has 4 different positions, `Top Left`, `Top Right (default)`, `Bottom Left`, `Bottom Right`.
- **Hooks - Usage**: You can use `useNotification` to create a dialog that can read the context.

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

### Notification

|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 notification, which can be used to update the message|string |`-`|-|
|position|The position of the message|'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' |`-`|-|
|btn|Add action button|ReactNode |`-`|-|
|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|Notification content|ReactNode \| string  **(Required)**|`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|title|Notification title|ReactNode \| string |`-`|-|
|onClose|Callback when close|() => void |`-`|-|

### Methods

- `Notification.info(config)`
- `Notification.success(config)`
- `Notification.warning(config)`
- `Notification.error(config)`
- `Notification.normal(config)`
- `Notification.remove(id)`
- `Notification.clear()`

### Global config

`Notification.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