This library will be released soon as 1.0 with a whole new codebase! Stay tuned!
A vanilla js library for creating alerts, prompts, and confirms.
Create an issue or write me [email protected]
Install attention.js is quite easy.
Just include the script dist/attention.js into your project and put the script before the closing body tag.
You also need to put the CSS into your project dist/attention.css.
<html>
<head>
<link href="dist/attention.css" rel="stylesheet">
</style>
</head>
<body>
<script src="dist/attention.js"></script>
</body>
</html> import { Alert } from 'attention';
new Alert({
title: 'This is a Title',
content: 'This is my content'
}); import { Confirm } from 'attention';
new Confirm({
title: 'This is a Confirm',
content: 'This is my content',
onConfirm(component) {
console.log('Accepted');
},
onCancel(component) {
console.log('Canceled');
}
}); import { Prompt } from 'attention';
new Prompt({
title: 'This is a Prompt',
content: 'This is my content',
onSubmit(component, value) {
console.log(`Value: ${value}`
}
});When creating a new Object of an Alert, Prompt, or Confirm, it is needed to pass an object. This object has a few options that you can change.
| key | description | type | mandatory |
|---|---|---|---|
| title | Title | string | true |
| content | Content | string | true |
| buttonCancel | Text for the cancel button (confirm) | string | false |
| buttonConfirm | Text for the confirm button (confirm) | string | false |
| placeholderText | Placeholder text (prompt) | string | false |
| submitText | Text for the submit button (prompt) | false |
Attention offers a lot of lifecycle methods. These methods are allowing changing the behavior of the life of a component.
Here is a list of available methods. These methods are available in every component.
| name | description |
|---|---|
| beforeRender | fires before rendering a component |
| afterRender | fires after rendering a component |
| beforeClose | fires before closing a component |
| afterClose | fires after closing a component |
Furthermore, we have methods which are only available in some methods.
| name | description |
|---|---|
| onAccept(component) | fires when a user has accepted |
| onCancel(component) | fires when a user has canceled |
| name | description |
|---|---|
| onSubmit(component, value) | fires when the user has entered the input |
For questions and support feel free to create an issue or write an email to [email protected]
If you found a bug, then please create an issue. It will help me a lot to make my work better. :)
Pull requests are always welcome. I am always happy to see others working on my GitHub projects.
Write an email to [email protected] :)