Notifications.js

API Documentation

This page contains the full documentation for Notifications.js. If you're new to the project you might prefer the getting started documentation before reading these docs.

Configuration Options

NotificationsJS comes with a number of configuration options, all of which are documented below. These are passed in when creating an instance of the library:

new Notifications({
  // options here
});

• targetDOMElement
  • Default value: '#notifications'
  • This is a selector used to find the DOM element that notifications should be created in.
• closeAfter
  • Default value: 5000
  • The time in milliseconds before a notification will close. Set this value to 0 to make notifications never close.
• onClose
  • Default value: function() {}
  • A function called when a notification is closed, so you can run some extra code.
• onShow
  • Default value: function() {}
  • A function called when a notification is shown, so you can run some extra code.
• onNewMessage
  • Default value: function(message) {}
  • A function called when a new notification is added. This function gets given the message object.
• shouldRender
  • Default value: true
  • Set this to false to stop Notifications.js rendering to the screen. Useful if you want to use this library for your notifications logic but pass rendering to a framework such as React.
• template
  • Default value: function(message) {...}
  • A function that should provide a string of HTML that will be used to create the notification. Is given an object containing the message.
• animations

  This is an object with three properties within it.

  • on: true. Set to false to stop any animations.
  • animateInClasses: ['fadeIn']. An array of classes to add to a notification to animate it in.
  • animateOutClasses: ['fadeOut']. An array of classes to add to a notification to animate it out.
• pusher

  This is an object used to configure your Pusher integration. See below for more information on this.

  • instance: null. The instance of PusherJS that you have on your page..
  • channelName: ''. The channel name that Notifications.js should subscribe to.
  • eventName: ''. The event name that Notifications.js should listen for.
  • transform: function(event) {}. This function is called with the data from the Pusher event and should return a string which will be used as the text for the notification.

API Methods

Notifications.js methods

Once you've created an instance of the library, you have the following API methods available to you.

• push(text, { classes: [] })

  This is used to create a new notification. You can pass in an optional second object with the classes project that's used to give the notification an additional class.

  notifications.push('Hello World', {
    classes: ['warning']
  });

• getMessages()

  Returns an array of messages. Note that messages are objects that Notifications.js creates and are documented below.

Message options

Each message is wrapped as an instance of the Message class that Notifications.js creates. When you call `getMessage` or define `onNewMessage`, you are given instances of Message. You should never create these directly, but instead call push, as documented above.

Each message has the following properties:

• text

  This is the text used to create the notification.

  var notifications = new Notifications({
    onNewMessage: function(message) {
      console.log('New message', message.text)
    }
  });