https://github.com/devlop/dialog
Lightweight and accessible drop-in replacement for the built-in browser dialog methods alert, confirm and prompt.
https://github.com/devlop/dialog
accessibility alert confirm dialog no-dependencies prompt typescript
Last synced: 7 months ago
JSON representation
Lightweight and accessible drop-in replacement for the built-in browser dialog methods alert, confirm and prompt.
- Host: GitHub
- URL: https://github.com/devlop/dialog
- Owner: devlop
- License: mit
- Created: 2021-08-16T04:30:42.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-04-08T08:12:41.000Z (over 2 years ago)
- Last Synced: 2025-02-14T04:37:01.558Z (8 months ago)
- Topics: accessibility, alert, confirm, dialog, no-dependencies, prompt, typescript
- Language: TypeScript
- Homepage: https://devlop.github.io/dialog
- Size: 1.07 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# dialog
Lightweight and accessible drop-in replacement for the built-in browser dialog methods
[alert](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert),
[confirm](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) and
[prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt).
# Installing
using npm
```bash
npm install @devlop-ab/dialog
```
# Usage
All methods are compatible with the standard dialog methods and accept the same arguments,
plus an additional `options` argument to change basic dialog appearance and behaviour.
All methods returns a promise, so by using await we can mimic the built in behaviour of
halting execution of the current function while waiting for the dialog response.
```javascript
import { dialog } from '@devlop-ab/dialog';
// alert (no return value)
await dialog.alert('Hello world!');
// confirm (returns true or false)
const result = await dialog.confirm('Do you really want to leave?');
// prompt (returns string or null if cancelled)
const result = await dialog.prompt('Are you feeling lucky?', 'sure');
```
## Dialog options
All dialog methods accept an (optional) options argument where you can do basic configuration changes.
See [https://devlop.github.io/dialog for more examples](https://devlop.github.io/dialog).
```javascript
// all options are optional
{
'title': 'Title of the dialog',
'okText': 'Yes',
'cancelText': 'No',
'focus': 'cancel',
}
// examples
await dialog.alert('I\'m afraid i can\'t do that Dave.', {
'title': 'HAL',
});
const result = await dialog.confirm('Do you really want to leave?', {
'okText': 'Yes',
'cancelText': 'No',
});
```
## Styles
The javascript does not output any styles, you must include them in your css/sass build.
**Using SASS**
```scss
// importing the theme "sky".
@import '@devlop-ab/dialog/dist/css/sky.css';
```
See [https://devlop.github.io/dialog for all available themes](https://devlop.github.io/dialog).
**Using vanilla CSS**
Copy the css file for the theme you want to use from `node_modules/@devlop-ab/dialog/dist/css` directory and put it with your other assets.
## Customizing the CSS
Each theme exposes a plethora of css variables allowing you to change colors, fonts and padding without overriding any css selectors.
```scss
// importing using sass
@import '@devlop-ab/dialog/dist/css/sky.css';
[data-dialog] {
--theme-color-hue: 310;
}
```
See [https://devlop.github.io/dialog for all variables](https://devlop.github.io/dialog).