Have a look at the example page.
Install with npm install dom-notifications --save
and use something like
browserify to create a bundle for the browser.
var domNotifications = require('dom-notifications')
var notifications = domNotifications(options)
document.body.appendChild(notifications.render())
notifications.add({message: 'You are now logged in'}) // defaults to `info`
notifications.add({message: 'This is a warning', type: 'warning'})
notifications.error('Oh noes: File not found')
By default this uses octicons icon classes that are not included automatically. Here's a CDN link that serves octicons that you can include in your HTML:
<style rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
Have a look at the options to replace them with your own icon classes.
{
repo: null, // Can be set to a GitHub url: 'http://github.com/finnp/notifications'
icons: {
error: 'octicon octicon-flame',
warning: 'octicon octicon-alert',
info: 'octicon octicon-info',
success: 'octicon octicon-check',
close: 'octicon octicon-x'
}
Setting the options.repo
to a GitHub repository will add an Create an issue for this error
button to the error notifications.
If you need more customization, instead of using the message
property, you
can also specify an element
property and set it to DOMElement
that will be the content.
For example with nanohtml:
notifications.add({
type: 'error',
element: html`<div>
<strong>My super custom <em>message</em>!</strong>
</div>`
})
Notifications extends Nanocomponent.
Creates the root element for the component. Call this ones to append it to the DOM. Optionally state is an array of notifications
Add and show a notification. notification
should be an object with a message
property and optionally one of the types 'error', 'warning', 'info', 'success'
(defaults to 'info'
).
If notification
is a string it will use this as a message and default to 'info'.
Shortcut for .add({type: 'info', message: message})
Shortcut for .add({type: 'error', message: message})
Shortcut for .add({type: 'warning', message: message})
Shortcut for .add({type: 'success', message: message})
If you don't want the styles to be used (or applied automatically), you can also use the module like this:
var Notifications = require('dom-notifications/main')
var notifications = new Notifications()
// optionally apply styles yourself
var styles = require('dom-notifications/style')
var insertCss = require('insert-css')
insertCss(styles)
The styles for the notifications were adapted from ember-cli-notifications and atom.