Promise-based dialog management with React portals and AbortSignal support.
npm install react-dom-dialogPromise-based dialog management with React portals and AbortSignal support.
Render DialogProvider once at your app root:
``tsx
import {DialogProvider} from 'react-dom-dialog'
function App() {
return (
<>
>
)
}
`
`tsx
import {showDialog} from 'react-dom-dialog'
// Basic dialog with DaisyUI
const result = await showDialog(() =>
$3
showDialogShows a dialog and returns a promise that resolves when the dialog closes.
Parameters:
-
Dialog: React component that receives:
- All props from options.props
- onClose(result: T | ''): Function to close dialog and resolve with result (must provide a value, use '' for no result)
- options?: Optional configuration object:
- props?: Props - Props to pass to the Dialog component
- nonModal?: boolean - Show as non-modal dialog (default: false)
- className?: string - CSS class name for the dialog element
- signal?: AbortSignal - Abort signal to cancel the dialog
- disableEsc?: boolean - Disable ESC key from closing the dialog (default: false)Returns:
- Promise that resolves with:
- The result passed to
onClose(result)
- Empty string '' if dialog closed without a result (ESC key, backdrop click, or signal aborted)Notes:
- Uses native
HTML element, so standard dialog closing methods work:
- ESC key (unless disableEsc: true)
-