rc-dialog

import React, { useState, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; import Dialog from 'rc-dialog'; import 'rc-dialog/assets/index.css'; // Don't forget to import the default styles const App = () => { const [visible, setVisible] = useState(false); const [title, setTitle] = useState('Basic Dialog'); const showDialog = useCallback(() => { setVisible(true); }, []); const onClose = useCallback(() => { console.log('Dialog closed!'); setVisible(false); }, []); return ( <div> <button onClick={showDialog}>Open Dialog</button> <Dialog title={title} visible={visible} onClose={onClose} maskClosable={true} // Allow closing by clicking the mask keyboard={true} // Allow closing by pressing Esc key destroyOnClose={true} // Unmount children when dialog closes className="my-custom-dialog" style={{ width: 500 }} > <p>This is the content of the dialog.</p> <p>You can put any React elements here.</p> <p>Current version: 10.0.0</p> <button onClick={() => alert('Button inside dialog clicked!')}>Click Me</button> </Dialog> </div> ); }; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render(<App />);