Use-html-dialog NPM

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).