ant-design/components/modal/demo/manual.tsx
二货爱吃白萝卜 8f81298027
docs: Adjust Modal demos (#40274)
* docs: Adjust modal demo

* test: update snapshot
2023-01-16 23:48:26 +08:00

37 lines
817 B
TypeScript

import { Button, Modal } from 'antd';
import React from 'react';
const App: React.FC = () => {
const [modal, contextHolder] = Modal.useModal();
const countDown = () => {
let secondsToGo = 5;
const instance = modal.success({
title: 'This is a notification message',
content: `This modal will be destroyed after ${secondsToGo} second.`,
});
const timer = setInterval(() => {
secondsToGo -= 1;
instance.update({
content: `This modal will be destroyed after ${secondsToGo} second.`,
});
}, 1000);
setTimeout(() => {
clearInterval(timer);
instance.destroy();
}, secondsToGo * 1000);
};
return (
<>
<Button onClick={countDown}>Open modal to close in 5s</Button>
{contextHolder}
</>
);
};
export default App;