); } ``` --- ## Lifecycle ``` Creation → Show → Hide → Destroy ↓ ↓ ↓ ↓ open() visible onHide onDestroy ↓ true ↓ ↓ nodeFactory ↓ visible alive ↓ ↓ false false Promise animation ↓ ↓ ↓ starts duration removed ... ↓ passes from DOM ↓ ↓ interaction destroy ↓ resolve ``` --- ## Best Practices 1. **Wrap app with ModalProvider** at the root level 2. **Use useModal in components** for automatic cleanup 3. **Use static API for utilities** outside React 4. **Customize at provider level** for consistent styling 5. **Use subtype for semantics** (info, success, warning, error) 6. **Always await or handle** promise rejections 7. **Keep modal content simple** - avoid complex state 8. **Test accessibility** - ensure keyboard navigation --- ## AbortSignal Support Provides `AbortSignal` support for programmatically canceling modals. ### Basic Usage ```typescript const controller = new AbortController(); alert({ title: 'Cancelable Modal', content: 'This will auto-close in 3 seconds.', signal: controller.signal, }); // Cancel modal after 3 seconds setTimeout(() => { controller.abort(); }, 3000); ``` ### Manual Abort Control ```typescript function ManualAbortControl() { const [controller, setController] = useState(null); const handleOpen = () => { const newController = new AbortController(); setController(newController); alert({ title: 'Manual Cancel', content: 'Click "Cancel" button to close this modal.', signal: newController.signal, closeOnBackdropClick: false, }).then(() => { setController(null); }); }; const handleAbort = () => { if (controller) { controller.abort(); } }; return (

); } ``` ### Batch Cancel Multiple Modals ```typescript function MultipleModalsAbort() { const [controllers, setControllers] = useState([]); const handleOpenMultiple = () => { const newControllers: AbortController[] = []; for (let i = 0; i < 3; i++) { const controller = new AbortController(); newControllers.push(controller); alert({ title: `Modal ${i + 1}`, content: `This is modal number ${i + 1}.`, signal: controller.signal, closeOnBackdropClick: false, }); } setControllers(newControllers); }; const handleAbortAll = () => { controllers.forEach((controller) => controller.abort()); setControllers([]); }; return (

); } ``` ### Pre-Aborted Signal Handling ```typescript // If the signal is already aborted, the modal closes immediately const controller = new AbortController(); controller.abort(); // Abort first alert({ title: 'Instant Close', content: 'Signal is already aborted, closing immediately.', signal: controller.signal, }).then(() => { console.log('Modal closed immediately.'); }); ``` --- ## License MIT License --- ## Version Current: See package.json