@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
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ć