https://github.com/niksy/statua-dialog

Dialog component.
https://github.com/niksy/statua-dialog

Last synced: 2 months ago
JSON representation

Dialog component.

• Host: GitHub
• URL: https://github.com/niksy/statua-dialog
• Owner: niksy
• License: mit
• Created: 2016-04-24T19:28:53.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-03-16T14:34:29.000Z (almost 5 years ago)
• Last Synced: 2024-10-12T01:02:59.045Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 73.2 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# @statua/dialog

[![Build Status][ci-img]][ci]

[![BrowserStack Status][browserstack-img]][browserstack]

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!](https://codesandbox.io/s/basic-example-k7zml)**

## Install

```sh

npm install @statua/dialog --save

```

## Usage

```js

import dialog from '@statua/dialog';

const instance = dialog({

	content: `
Becky
`

});


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ć](http://ivannikolic.com)

[ci]: https://travis-ci.com/niksy/statua-dialog

[ci-img]: https://travis-ci.com/niksy/statua-dialog.svg?branch=master

[browserstack]: https://www.browserstack.com/

[browserstack-img]: https://www.browserstack.com/automate/badge.svg?badge_key=YTBsUVk1V2d5MXFTWEYzU1RzUUJEaFBJZUpxbE5XNlRGUXRKcXc2K1ZXaz0tLVljcmdYbjBtSDRvQXF5NkpoazUwREE9PQ==--789f7d8270ee69113475e7539a8aff8db942c8dc