Notification
Display a 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
import { Button, notification } from 'antd';
const openNotification = () => {
notification.open({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});
};
ReactDOM.render(
<Button type="primary" onClick={openNotification}>Open the notification box</Button>
, mountNode);
import { Button, notification } from 'antd';
const openNotificationWithIcon = (type) => {
notification[type]({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});
};
ReactDOM.render(
<div>
<Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
<Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
<Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
<Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
</div>
, mountNode);
import { Button, notification, Icon } from 'antd';
const openNotification = () => {
notification.open({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
icon: <Icon type="smile-circle" style={{ color: '#108ee9' }} />,
});
};
ReactDOM.render(
<Button type="primary" onClick={openNotification}>Open the notification box</Button>
, mountNode);
import { Button, notification } from 'antd';
const openNotification = () => {
notification.open({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
style: {
width: 600,
marginLeft: 335 - 600,
},
});
};
ReactDOM.render(
<Button type="primary" onClick={openNotification}>Open the notification box</Button>
, mountNode);
import { Button, notification } from 'antd';
const openNotification = () => {
const args = {
message: 'Notification Title',
description: 'I will never close automatically. I will be close automatically. I will never close automatically.',
duration: 0,
};
notification.open(args);
};
ReactDOM.render(
<Button type="primary" onClick={openNotification}>Open the notification box</Button>
, mountNode);
import { Button, notification } from 'antd';
const close = () => {
console.log('Notification was closed. Either the close button was clicked or duration time elapsed.');
};
const openNotification = () => {
const key = `open${Date.now()}`;
const btn = (
<Button type="primary" size="small" onClick={() => notification.close(key)}>
Confirm
</Button>
);
notification.open({
message: 'Notification Title',
description: 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
btn,
key,
onClose: close,
});
};
ReactDOM.render(
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
, mountNode);
import { Button, Select, notification } from 'antd';
const { Option } = Select;
const options = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
const openNotification = () => {
notification.open({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});
};
ReactDOM.render(
<div>
<Select
defaultValue="topRight"
style={{ width: 120, marginRight: 10 }}
onChange={(val) => {
notification.config({
placement: val,
});
}}
>
{options.map(val => <Option key={val} value={val}>{val}</Option>)}
</Select>
<Button
type="primary"
onClick={openNotification}
>
Open the notification box
</Button>
</div>
, mountNode);
API#
notification.success(config)
notification.error(config)
notification.info(config)
notification.warning(config)
notification.warn(config)
notification.close(key: String)
notification.destroy()
The properties of config are as follows:
Property | Description | Type | Default |
---|---|---|---|
btn | Customized close button | ReactNode | - |
className | Customized CSS class | string | - |
description | The content of notification box (required) | string|ReactNode | - |
duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
icon | Customized icon | ReactNode | - |
key | The unique identifier of the Notification | string | - |
message | The title of notification box (required) | string|ReactNode | - |
placement | Position of Notification, can be one of topLeft topRight bottomLeft bottomRight | string | topRight |
style | Customized inline style | React.CSSProperties | - |
onClose | Specify a function that will be called when the close button is clicked | Function | - |
notification
also provides a global config()
method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options when displaying.
notification.config(options)
notification.config({
placement: 'bottomRight',
bottom: 50,
duration: 3,
});
Property | Description | Type | Default |
---|---|---|---|
bottom | Distance from the bottom of the viewport, when placement is bottomRight or bottomLeft (unit: pixels). | number | 24 |
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 | () => HTMLNode | () => document.body |
placement | Position of Notification, can be one of topLeft topRight bottomLeft bottomRight | string | topRight |
top | Distance from the top of the viewport, when placement is topRight or topLeft (unit: pixels). | number | 24 |