@statua/dialog

@statua/dialog

Dialog component.

Features:

• Best accessibility practices baked in
• Tab and focus lock on tabbable elements inside dialog
• Handles usual UX considerations such as closing on Escape key and clicking on dialog backdrop
• Flexible styling
• Sets aria-hidden on all sibling and ancestor elements except for the currently active dialog which traps the virtual cursor inside the dialog

Try it now!

Install

npm install @statua/dialog --save

Usage

import dialog from '@statua/dialog';

const instance = dialog({
	content: `<p>Becky</p>`
});

instance.show();

API

dialog(options)

Returns: Object

Creates dialog instance. Dialog element will be appended to body element.

options

Type: Object

content

Type: string|Node
Required

Dialog content which can be:

• HTML string
• Instance of Node (DOM node, HTML comment, document fragment, …)

onCreate

Type: Function
Default: () => {}

Callback to run when dialog instance is created.

onDestroy

Type: Function
Default: () => {}

Callback to run when dialog instance is destroyed.

Useful when you want to perform operations such as moving dialog content to original location if dialog content was already existing DOM node.

onShow

Type: Function
Default: () => {}

Callback to run when dialog instance is shown.

onClose

Type: Function
Default: () => {}

Callback to run when dialog instance is closed.

htmlClassNamespace

Type: string
Default: ``

HTML class namespace in addition to default one (statua-Dialog).

Useful if you want to create additional styling/functionality selector hook.

explicitClose

Type: boolean
Default: false

Disable modal close on Escape key press or when modal backdrop is clicked.

instance.show()

Show dialog.

instance.close()

Close dialog.

instance.destroy()

Destroy dialog instance.

DOM API

Dialog instance can be controlled with certain DOM attributes.

[data-statua-dialog-action="close"]

Closes closest dialog instance when clicking on element.

Browser support

Tested in IE11+ and all modern browsers.

Test

For automated tests, run npm run test:automated (append :watch for watcher support).

License

MIT © Ivan Nikolić

Changelog

[1.2.0][] - 2020-03-16

Added

• explicitClose option for disabling modal close when clicking on modal backdrop or when pressing Escape key