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
Links
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.
Happy Coding,
I hope the above example with help you to do your task.