finnp/dom-notifications

Atom-inspired notifications component

dom-notifications

Have a look at the example page.

usage

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.

options

{
  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.

notifications.render(state?)

Creates the root element for the component. Call this ones to append it to the DOM. Optionally state is an array of notifications

notifications.add(notification)

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'.

notifications.info(message)

Shortcut for .add({type: 'info', message: message})

notifications.error(message)

Shortcut for .add({type: 'error', message: message})

notifications.warning(message)

Shortcut for .add({type: 'warning', message: message})

notifications.success(message)

Shortcut for .add({type: 'success', message: message})

Use without styles

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)

Notes

The styles for the notifications were adapted from ember-cli-notifications and atom.