React Library for Native Dialogs

Promise-based dialog management with React portals and AbortSignal support.

Setup

Render DialogProvider once at your app root:

import {DialogProvider} from 'react-dom-dialog'

function App() {
  return (
    <>
      <DialogProvider />
      <YourApp />
    </>
  )
}

Sample Usage

import {showDialog} from 'react-dom-dialog'

// Basic dialog with DaisyUI
const result = await showDialog(() => <form className="modal-box" method="dialog">
	<h3 className="text-lg font-bold">Confirm</h3>
	<p className="py-4">Are you sure?</p>
	<div className="modal-action">
		<div className="space-x-1">
			<button className="btn">Cancel</button>
			<button className="btn btn-neutral" value="yes">OK</button>
		</div>
	</div>
</form>, {className: 'modal'})

API

showDialog<T, Props>(Dialog, options?): Promise<T | ''>

Shows 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 <dialog/> HTML element, so standard dialog closing methods work:
  • ESC key (unless disableEsc: true)
  • <form method="dialog"> with submit buttons (use value attribute to set the return value)
  • Backdrop click for modal dialogs
  • Calling .close() or .close(returnValue) directly on the dialog element
• Dialog elements are created in document.body and rendered via React portals
• Multiple dialogs can be shown simultaneously
• Dialogs are automatically cleaned up 1000ms after closing
• If DialogProvider is not mounted, showDialog will wait indefinitely

DialogProvider

Component that must be rendered once at the app root to enable dialog functionality.