Basic
Duration after which the notification box is closed
Notification with icon
Custom close button
Customized Icon
Placement
Customized style
Update Message Content
Get context with hooks
API

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

Basic

The simplest usage that close the notification box after 4.5s.

TypeScript
JavaScript
import { Button, notification } from 'infrad';
import React from 'react';

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;

Notification with icon

A notification box with a icon at the left side.

TypeScript
JavaScript
import { Button, notification, Space } from 'infrad';
import React from 'react';

type NotificationType = 'success' | 'info' | 'warning' | 'error';

const openNotificationWithIcon = (type: NotificationType) => {
  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.',
  });
};

const App: React.FC = () => (
  <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;

Customized Icon

The icon can be customized to any react node.

TypeScript
JavaScript
import { SmileOutlined } from 'infra-design-icons';
import { Button, notification } from 'infrad';
import React from 'react';

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: <SmileOutlined style={{ color: '#108ee9' }} />,
  });
};

const App: React.FC = () => (
  <Button type="primary" onClick={openNotification}>
    Open the notification box
  </Button>
);

export default App;

Customized style

The style and className are available to customize Notification.

TypeScript
JavaScript
import { Button, notification } from 'infrad';
import React from 'react';

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.',
    className: 'custom-class',
    style: {
      width: 600,
    },
  });
};

const App: React.FC = () => (
  <Button type="primary" onClick={openNotification}>
    Open the notification box
  </Button>
);

export default App;

Get context with hooks

Use notification.useNotification to get contextHolder with context accessible issue.

TypeScript
JavaScript
import {
  RadiusBottomleftOutlined,
  RadiusBottomrightOutlined,
  RadiusUpleftOutlined,
  RadiusUprightOutlined,
} from 'infra-design-icons';
import { Button, Divider, notification, Space } from 'infrad';
import type { NotificationPlacement } from 'infrad/lib/notification';
import React from 'react';

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,
    });
  };

  return (
    <Context.Provider value={{ name: 'Infra Design' }}>
      {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 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.

TypeScript
JavaScript
import { Button, notification } from 'infrad';
import React from 'react';

const openNotification = () => {
  const args = {
    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,
  };
  notification.open(args);
};

const App: React.FC = () => (
  <Button type="primary" onClick={openNotification}>
    Open the notification box
  </Button>
);

export default App;

Custom close button

To customize the style or font of the close button.

TypeScript
JavaScript
import { Button, notification } from 'infrad';
import React from 'react';

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,
  });
};

const App: React.FC = () => (
  <Button type="primary" onClick={openNotification}>
    Open the notification box
  </Button>
);

export default App;

Placement

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

TypeScript
JavaScript
import {
  BorderBottomOutlined,
  BorderTopOutlined,
  RadiusBottomleftOutlined,
  RadiusBottomrightOutlined,
  RadiusUpleftOutlined,
  RadiusUprightOutlined,
} from 'infra-design-icons';
import { Button, Divider, notification, Space } from 'infrad';
import type { NotificationPlacement } from 'infrad/lib/notification';
import React from 'react';

const openNotification = (placement: NotificationPlacement) => {
  notification.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,
  });
};

const App: React.FC = () => (
  <>
    <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 Message Content

Update content with unique key.

TypeScript
JavaScript
import { Button, notification } from 'infrad';
import React from 'react';

const key = 'updatable';

const openNotification = () => {
  notification.open({
    key,
    message: 'Notification Title',
    description: 'description.',
  });

  setTimeout(() => {
    notification.open({
      key,
      message: 'New Title',
      description: 'New description.',
    });
  }, 1000);
};

const App: React.FC = () => (
  <Button type="primary" onClick={openNotification}>
    Open the notification box
  </Button>
);

export default App;

API#

notification.success(config)
notification.error(config)
notification.info(config)
notification.warning(config)
notification.warn(config)
notification.open(config)
notification.close(key: String)
notification.destroy()

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	-

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 ConfigProvider for 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

FAQ#

Why I can not access context, redux, ConfigProvider `locale/prefixCls` 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.

How to set static methods prefixCls ？#

You can config with ConfigProvider.config