First we need to create a new notification instance.

import Notification from 'BobjollNotifications'                  

    const notification = new Notification({
        fixed?: boolean; // if enabled timeout will be disabled and user has to close notification window.
        recurrent?: boolean; // if enabled notification will render until user closes notification and checks the hide for ever box.
        recurrentMax?: number; // Define max times an notification can be rendered if recurrent if user doesn't check hide for ever box.
        recurrentPrint?: boolean; // If you define recurrentMax set this to true to enable.
        timeout?: number; // Override default notification timeout.
        template?: Function; // Override default notifications template.
        position?: keyof Position; // Override default notifications position.

Notifications can be used in multiple ways such as fixed elements over the screen or inserted before a dom element.

        id?: string; // Assign a unique id to the notification, this is required if we want a notification not to show up again or to use features like recurrent or fixed.
        class?: string; // Add custom classes.
        html: string; // Notification content
        target?: string | Element; // Add a fixed notification floating beside a element.
        insert?: {
            element: Element;
            position: 'beforeend' | 'beforebegin' | 'afterend' | 'afterbegin';
        } // Insert a static notification in dom.
        position?: keyof Position; // Set notification position
Example 1

Standard use case where notification is fixed over content.

var example1 = document.getElementById('notification-example-1');
    var notifications = new Notifications({
        fixed: true,
        position: 'center',

    if (example1) {
        example1.addEventListener('click', function() {
                html: "...",
Example 2

Notifications inserted before{start/end}/after{start/end} of a dom element.

var example2 = document.getElementById('notification-example-2');
    var notifications = new Notifications({
        id: 'example-2',
        class: 'mg-top-lv3',
        fixed: true,
        recurrent: true,
        insert: {
            element: example2,
            position: 'afterend',
        position: 'static',

    if (example2) {
        example2.addEventListener('click', function() {
                html: "...",


export interface Position {


Remove notification shadow for a static notification for instance.
Change styling to a alert.
Hide disable checkbox.
Hide close button.