Display a notification message globally.
To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:
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.
import React, { useMemo } from 'react';
import {
RadiusBottomleftOutlined,
RadiusBottomrightOutlined,
RadiusUpleftOutlined,
RadiusUprightOutlined,
} from '@ant-design/icons';
import { Button, Divider, notification, Space } from 'antd';
import type { NotificationPlacement } from 'antd/es/notification/interface';
const Context = React.createContext({ name: 'Default' });
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = (placement: NotificationPlacement) => {
api.info({
message: `Notification ${placement}`,
description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
placement,
});
};
const contextValue = useMemo(() => ({ name: 'Ant Design' }), []);
return (
<Context.Provider value={contextValue}>
{contextHolder}
<Space>
<Button type="primary" onClick={() => openNotification('topLeft')}>
<RadiusUpleftOutlined />
topLeft
</Button>
<Button type="primary" onClick={() => openNotification('topRight')}>
<RadiusUprightOutlined />
topRight
</Button>
</Space>
<Divider />
<Space>
<Button type="primary" onClick={() => openNotification('bottomLeft')}>
<RadiusBottomleftOutlined />
bottomLeft
</Button>
<Button type="primary" onClick={() => openNotification('bottomRight')}>
<RadiusBottomrightOutlined />
bottomRight
</Button>
</Space>
</Context.Provider>
);
};
export default App;
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.
import React from 'react';
import { Button, notification } from 'antd';
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
api.open({
message: 'Notification Title',
description:
'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
duration: 0,
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App;
To customize the style or font of the close button.
import React from 'react';
import { Button, notification, Space } from 'antd';
const close = () => {
console.log(
'Notification was closed. Either the close button was clicked or duration time elapsed.',
);
};
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
const key = `open${Date.now()}`;
const btn = (
<Space>
<Button type="link" size="small" onClick={() => api.destroy()}>
Destroy All
</Button>
<Button type="primary" size="small" onClick={() => api.destroy(key)}>
Confirm
</Button>
</Space>
);
api.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,
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App;
A notification box can appear from the topRight, bottomRight, bottomLeft or topLeft of the viewport via placement.
import React from 'react';
import {
BorderBottomOutlined,
BorderTopOutlined,
RadiusBottomleftOutlined,
RadiusBottomrightOutlined,
RadiusUpleftOutlined,
RadiusUprightOutlined,
} from '@ant-design/icons';
import { Button, Divider, notification, Space } from 'antd';
import type { NotificationPlacement } from 'antd/es/notification/interface';
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = (placement: NotificationPlacement) => {
api.info({
message: `Notification ${placement}`,
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
placement,
});
};
return (
<>
{contextHolder}
<Space>
<Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
top
</Button>
<Button
type="primary"
onClick={() => openNotification('bottom')}
icon={<BorderBottomOutlined />}
>
bottom
</Button>
</Space>
<Divider />
<Space>
<Button
type="primary"
onClick={() => openNotification('topLeft')}
icon={<RadiusUpleftOutlined />}
>
topLeft
</Button>
<Button
type="primary"
onClick={() => openNotification('topRight')}
icon={<RadiusUprightOutlined />}
>
topRight
</Button>
</Space>
<Divider />
<Space>
<Button
type="primary"
onClick={() => openNotification('bottomLeft')}
icon={<RadiusBottomleftOutlined />}
>
bottomLeft
</Button>
<Button
type="primary"
onClick={() => openNotification('bottomRight')}
icon={<RadiusBottomrightOutlined />}
>
bottomRight
</Button>
</Space>
</>
);
};
export default App;
Update content with unique key.
import React from 'react';
import { Button, notification } from 'antd';
const key = 'updatable';
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
api.open({
key,
message: 'Notification Title',
description: 'description.',
});
setTimeout(() => {
api.open({
key,
message: 'New Title',
description: 'New description.',
});
}, 1000);
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App;
The simplest usage that close the notification box after 4.5s.
import React from 'react';
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.',
onClick: () => {
console.log('Notification Clicked!');
},
});
};
const App: React.FC = () => (
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
);
export default App;
A notification box with a icon at the left side.
import React from 'react';
import { Button, notification, Space } from 'antd';
type NotificationType = 'success' | 'info' | 'warning' | 'error';
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotificationWithIcon = (type: NotificationType) => {
api[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.',
});
};
return (
<>
{contextHolder}
<Space>
<Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
<Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
<Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
<Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
</Space>
</>
);
};
export default App;
The icon can be customized to any react node.
import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Button, notification } from 'antd';
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
api.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: <SmileOutlined style={{ color: '#108ee9' }} />,
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App;
The style and className are available to customize Notification.
import React from 'react';
import { Button, notification } from 'antd';
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
api.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.',
className: 'custom-class',
style: {
width: 600,
},
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App;
notification.success(config)notification.error(config)notification.info(config)notification.warning(config)notification.open(config)notification.destroy(key?: String)The properties of config are as follows:
| Property | Description | Type | Default |
|---|---|---|---|
| bottom | Distance from the bottom of the viewport, when placement is bottomRight or bottomLeft (unit: pixels) | number | 24 |
| btn | Customized close button | ReactNode | - |
| className | Customized CSS class | string | - |
| closeIcon | Custom close icon | ReactNode | - |
| description | The content of notification box (required) | ReactNode | - |
| 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 |
| icon | Customized icon | ReactNode | - |
| key | The unique identifier of the Notification | string | - |
| message | The title of notification box (required) | ReactNode | - |
| placement | Position of Notification, can be one of topLeft topRight bottomLeft bottomRight | string | topRight |
| style | Customized inline style | CSSProperties | - |
| top | Distance from the top of the viewport, when placement is topRight or topLeft (unit: pixels) | number | 24 |
| onClick | Specify a function that will be called when the notification is clicked | function | - |
| onClose | Trigger when notification closed | function | - |
| props | Props passed down | Object | 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. |
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)
When you use
ConfigProviderfor global configuration, the system will automatically start RTL mode by default.(4.3.0+)When you want to use it alone, you can start the RTL mode through the following settings.
notification.config({placement: 'bottomRight',bottom: 50,duration: 3,rtl: true,});
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| bottom | Distance from the bottom of the viewport, when placement is bottomRight or bottomLeft (unit: pixels) | number | 24 | |
| closeIcon | Custom close icon | ReactNode | - | |
| 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 | |
| rtl | Whether to enable RTL mode | boolean | false | |
| top | Distance from the top of the viewport, when placement is topRight or topLeft (unit: pixels) | number | 24 | |
| maxCount | Max Notification show, drop oldest if exceed limit | number | - | 4.17.0 |
locale/prefixCls/theme in notification?antd will dynamic create React instance by ReactDOM.render when call notification methods. Whose context is different with origin code located context.
When you need context info (like ConfigProvider context), you can use notification.useNotification to get api instance and contextHolder node. And put it in your children:
const [api, contextHolder] = notification.useNotification();return (<Context1.Provider value="Ant">{/* contextHolder is inside Context1 which means api will get value of Context1 */}{contextHolder}<Context2.Provider value="Design">{/* contextHolder is outside Context2 which means api will **not** get value of Context2 */}</Context2.Provider></Context1.Provider>);
Note: You must insert contextHolder into your children with hooks. You can use origin method if you do not need context connection.
App Package Component can be used to simplify the problem of
useNotificationand other methods that need to manually implant contextHolder.
You can config with ConfigProvider.config