/use-html-dialog

Simple, tiny React hook for working with native HTML dialogs

Primary LanguageTypeScript

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