Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
awesome-notifications
Advanced tools
Awesome Notifications
It's a lightweight, fully customizable JavaScript library for showing notifications.
Advantages: no dependencies, advanced async support, fully customizable, >95% test coverage.
Demo: https://f3oall.github.io/awesome-notifications/
Install
Attention! This library uses FontAwesome icons, so you either need to make sure that FontAwesome is connected to your project or disable icons, passing the
icons: {enabled: false}property to options. Also you can preserve icons setting up a custom template for them via editingoptions.icons.prefixandoptions.icons.suffix
Via NPM
npm install --save awesome-notifications
In browser
Download index.var.js and style.css, then put them in your html:
<head>
<link rel="stylesheet" href="path/to/style.css"></link>
<script src="path/to/index.var.js"></script>
</head>
Vue.js version
You can learn more in the Vue.js version repository: https://github.com/f3oall/vue-awesome-notifications
Usage
Node.js
import AWN from "awesome-notifications"
let notifier = new AWN(options)
In browser
<script>
var notifier = new AWN(options);
</script>
<button onclick="notifier.success('Success message');">Show Success</button>
Available functions
You can pass any valid HTML to html functions params.
| Function | Params | Description | Example |
|---|---|---|---|
tip(html) | html - String, required | shows a gray toast with specified html | tip('First line text<br>Second line text') |
info(html) | html - String, required | shows a blue toast with specified html | info('<b>You can put any HTML here</b>') |
success(html) | html - String, required | shows a green toast with specified html | success('Simple none-HTML message') |
warning(html) | html - String, required | shows an orange toast with specified html | warning('Simple none HTML message') |
alert(html) | html - String, required | shows a red toast with specified html | alert('Simple none HTML message') |
async(promise, onResolve, onReject, html) | promise - Promise, required; onResolve - Function, String, optional, either callback or html for success toast; onReject - Function, String, optional, either callback or html for alert toast; html - String, optional, html for async toast | shows an async gray toast with specified html On promise resolve will run onResolve if it's function, and show success toast if onResolve is a stirngOn promise reject will run onReject function and show alert toast, where msg is a promise error or onReject, if it's a String | async(somePromise, 'show me a green toast', 'custom message for alert toast' , 'Custom async msg') |
asyncBlock(promise, onResolve, onReject, html) | promise - Promise, required; onResolve - Function, String, optional, either callback or html for success toast; onReject - Function, String, optional, either callback or html for alert toast; html - String, optional, html for async toast | blocks the screen untill promise will be completed On promise resolve will run onResolve if it's function, and show success toast if onResolve is a stirngOn promise reject will run onReject function and show alert toast, where msg is a promise error or onReject, if it's a String | asyncBlock(somePromise, 'show me a green toast', 'custom message for alert toast' , 'Custom async msg') |
confirm(html, okFunc, cancelFunc) | html - String, required okFunc - Function, optional cancelFunc - Function, optional | shows a modal dialog, which is waiting for users confirmation If user pressed 'OK' button, okFunc will be executed If user pressed 'Cancel' button, cancelFunc will be executed. Both buttons on click will close the window | confirm('Are you sure?', runIfOkClicked, runIfCancelClicked) |
modal(html, className) | html - String, required className - String, required | shows a custom modal dialog which contains only value of html You can add styles for your custom modal by class awn-modal-${className}, where className is a param which was passed to the function | modal('<h2>Your custom title</h2><p>Your custom text</p>', 'custom-class-name') |
Customization
Options
You can pass your own options when you're initializing a library, e.g.
var options = {
labels: {
tip: "Your custom tip box label"
}
}
var notifier = new AWN.default(options)
Available options
All labels properties support HTML.
| Name | Type | Default | Description |
|---|---|---|---|
| position | String | "bottom-right" | position of notifications |
| duration | Number | 5000 | determines how long notification exists, ms |
| animationDuration | Number | 300 | determines speed of animation, ms |
| asyncBlockMinDuration | Number | 500 | minimal time to show asyncBlock modal window, prevents blinking, when async function completes too fast |
| maxNotifications | Number | 10 | max amount of notifications |
| labels | Object | See properties below | default labels for notifications |
| labels.tip | String | "Tip" | default label for tip toast |
| labels.info | String | "Info" | default label for info toast |
| labels.success | String | "Success" | default label for success toast |
| labels.warning | String | "Attention" | default label for warning toast |
| labels.alert | String | "Error" | default label for alert toast |
| labels.async | String | "Loading" | default label for async toast |
| labels.confirm | String | "Confirmation required" | confrim window title |
| icons | Object | See properties below | default Font Awesome icons for notifications |
| icons.tip | String | "question-circle" | FontAwesome icon classes for tip toast, first one without fa- |
| icons.info | String | "info-circle" | FontAwesome icon classes for info toast, first one without fa- |
| icons.success | String | "check-circle" | FontAwesome icon classes for success toast, first one without fa- |
| icons.warning | String | "exclamation-circle" | FontAwesome icon classes for warning toast, first one without fa- |
| icons.alert | String | "warning" | FontAwesome icon classes for alert toast, first one without fa- |
| icons.async | String | "cof fa-spin" | FontAwesome icon classes for async toast, first one without fa- |
| icons.confirm | String | "warning" | FontAwesome icon classes for confirm window, first one without fa- |
| icons.enabled | Boolean | false | Determines icons existence |
| icons.prefix | String | "<i class='fa fa-fw fa" | HTML before any icons[value] (e.g. icons.tip) |
| icons.suffix | String | "'></i>" | HTML after any icons[value] (e.g. icons.tip) |
| modal | Object | See properties below | modal windows settings |
| modal.okLabel | String | "OK" | confirm window success button label |
| modal.cancelLabel | String | "Cancel" | confirm window cancel button label |
| modal.maxWidth | String | "500px" | confirm window max-width CSS property |
| messages | Object | See properties below | default messages |
| messages.async | String | "Please, wait..." | default async toast message, supports HTML |
| messages["async-block"] | String | "Loading" | default asyncBlock modal message, supports HTML |
| replacements | Object | See properties below | contains rules of replacement for htmleach rule is Objectwhere keys are first param for replace function and values are second param. |
| replacements.general | Object | { "<script>": "", "</script>": "" } | rules for all event types |
| replacements.tip | Object | "" | rules for tip events |
| replacements.info | Object | "" | rules for info events |
| replacements.success | Object | "" | rules for success events |
| replacements.warning | Object | "" | rules for warning events |
| replacements.alert | Object | "" | rules for alert events |
| replacements.async | Object | "" | rules for async events |
| replacements.asyncBlock | Object | "" | rules for asyncBlock modal window |
| replacements.modal | Object | "" | rules for custom modal window |
| replacements.confirm | Object | "" | rules for confirm window |
| handlers | Object | See properties below | handlers are functions which handle your promises' returning values, more info below |
| handlers.enabled | Boolean | false | enables or disables handling of promises' returning values |
| handlers.onResolve | Function | see in source code | handler which handles resolve() value |
| handlers.onReject | Function | see in source code | handler which handles reject() value |
Handlers
If promise which you pass to the async function returns something other than String, you will get an error. The most easiest way is to edit promise in way it will send a String on reject.
However sometimes you can't change your promise behaviour, therefore you can set default handlers. Look at example:
function someAsyncFunc() {
// any function which returns a Promise and whoose behavior you can't change
return Promise((resolve, reject) => {
reject({ errorMessage: "Error has occurred" }) // it returns an Object at reject
})
}
let notifier = new AWN()
notifier.async(someAsyncFunc()) // will return an error because reject returning value should be a String
notifer = new AWN({
handlers: {
enabled: true, // to fix that you have to enable handlers on initializing
onReject(value) {
// and add a proper function which will solve your issue
return value.errorMessage // this will return errorMessage instead of object
}
}
})
notifier.async(someAsyncFunc()) // now it will show an alert toast with errorMessage
Styles
The most convinient and quick way to change styles is dowload styles folder which contains .scss files. Then you have to edit variables.scss, compile your scss to css and add new css file to your project.
Also, you can just add default style.css to your project and override it in your styles file. To learn more about default styles, look at styles folder.
Security notes
Make sure that you pass safe HTML to msg param. Sending data which can be directly or indirectly edited by user (e.g. name of account), provides a possibility for HTML Injections. You can set up replacements in options to filter msg variable.
License
This project is licensed under the terms of the MIT license.
FAQs
Lightweight library for beautifull and smooth notifications
The npm package awesome-notifications receives a total of 1,822 weekly downloads. As such, awesome-notifications popularity was classified as popular.
We found that awesome-notifications demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Package last updated on 19 Jan 2018
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
By Sarah Gooding - Feb 04, 2025
Research
Security News
Go Supply Chain Attack: Malicious Package Exploits Go Module Proxy Caching for Persistence
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
By Kirill Boychenko - Feb 04, 2025