use-html-dialog

Simple, tiny React hook for working with native HTML dialogs. Optionally resets user agent dialog styles and closes on backdrop click when used in modal mode.

Installation

npm i use-html-dialog

Usage

const { showModal, props, close } = useHtmlDialog()

return (
	<>
		<button onClick={showModal}>Open modal</button>

		<dialog {...props}>
			This is a modal dialog.
			<button onClick={close}>Close modal</button>
		</dialog>
	</>
)

API

Options

The hook takes an options object as an optional argument. The following options are available:

Option	Type	Default	Description
resetStyles	boolean	true	Whether to reset default user agent dialog styles.
closeOnOutsideClick	boolean	true	Whether to close the dialog when the backdrop is clicked. Only applies when showModal is used.

Example:

const dialog = useHtmlDialog({
	resetStyles: false,
	closeOnOutsideClick: false,
})

Hook Return

The hook returns an object with the following properties:

Property	Type	Description
show	function	Shows the dialog.
showModal	function	Shows the dialog as a modal.
close	function	Closes the dialog.
props	object	Props to spread on the dialog element.
isOpen	boolean	Whether the dialog is open.
ref	object	Ref to the dialog element, in case you need it (you probably don't).

License

MIT