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