Solution

To alert with auto close using ant design in react js, first install ant design library using npm install antd command and then use api.info. it will allow auto close alert in default.

Snippet

In this snippet, we will use api.info({ message: Notification ${placement}}) and make alert with auto close using ant design.

    api.info({
      message: `Notification ${placement}`,
      description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
      placement,
    });

Example

In this example, we will import icon, button, notification, space etc. then make alert with auto close using ant design.

Let’s start coding…

App.js

import {
  RadiusUpleftOutlined, 
} from '@ant-design/icons';
import { Button, notification, Space } from 'antd';
import React, { useMemo } from 'react';
const Context = React.createContext({
  name: 'Default',
});
const App = () => {
  const [api, contextHolder] = notification.useNotification();
  const openNotification = (placement) => {
    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>
      </Space>
      
    </Context.Provider>
  );
};
export default App;

Output

target, child

Here, we are provided code sandbox links for the above program make alert with auto close using ant design. Then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.