A lightweight javascript notification library with customisable templates and layout in just 3kB.
Install via npm
npm install lightalertjs
Start by creating a service provider
var lightalert = new require('lightalertjs').NotificationService({
$elem: $("#notification-stack")
});
Then use service to create notifications
lightalert.notify("Hello world!")
Add an image to the notification:
lightalert.notify("Hello world!", "https://example.com/hello.svg")
Add a class, in this case changing background and text:
lightalert.notify("Hello world!", "https://example.com/hello.svg", "bg-black")
lightalert.notify("Hello world!", "https://example.com/hello.svg", "bg-success")
lightalert.notify("Hello world!", "https://example.com/hello.svg", "bg-warning")
lightalert.notify("Hello world!", "https://example.com/hello.svg", "bg-error")
lightalert.notify("Hello world!", "https://example.com/hello.svg", "bg-info")
lightalert.notify("Hello world!", "https://example.com/hello.svg", "bg-primary")
Add a debounce timer to the service, preventing the user from receiving a notification more than once per x seconds. Makes use of sessionStorage to persist timer countdown across page loads.
var lightalert = new NotificationService({
$elem: $("#notification-stack"),
debounce_seconds: 10
});
Change the template:
var lightalert = new NotificationService({
$elem: $("#notification-stack"),
template: "<div class='notification {{class}} id='{{uid}}'><img src='{{imageUrl}}'>{{content}}</div>'"
});
Change whether new notifications are appended or prepended to the stack:
var lightalert = new NotificationService({
$elem: $("#notification-stack"),
append: false
});
These settings can be changed after instantiation via properties:
lightalert.debounce_seconds = 5;
- Bootstrap 3.3 (For default template, no CSS requirements if you provide your own)
- jQuery 1.8+