notification-util

Notification util

Very simple notification system for JS/TS projects.

Installation

npm i notification-util

Configuration

Only has to be called once, before using the Notification or Loader class.

import {
  Notification,
  Loader,
  configureNotifications
} from 'notification-util';

configureNotification({}); // Required, but can be empty

Configuration options

You must run configureNotification before using the Notification or Loader class.

To run without customization, pass an empty object as argument.

You can override any of default settings by following the structure below.

Option	Description
containerSelector	Selector for notification container. Attribute, ID, class as string with # or . as needed
classes	Override the default CSS classes by providing your own
→ notificationClass	CSS class as string, no prefixed .
→ headingWrapperClass	CSS class as string, no prefixed .
→ iconClass	CSS class as string, no prefixed .
→ messageClass	CSS class as string, no prefixed .
→ headingClass	CSS class as string, no prefixed .
icons	Override the default icons by providing your own.
→ success	string injected as HTML
→ warning	string injected as HTML
→ error	string injected as HTML
→ debug	string injected as HTML
→ loading	string injected as HTML
injectCss	boolean Inject default CSS. If disabling, be sure to provide your own animation CSS.

Defaults

configureNotification({
  containerSelector: '[sn-notification-container]',
  classes: {
    notificationClass: 'sn_notification',
    headingWrapperClass: 'sn_notification-heading-wrapper',
    iconClass: 'sn_notification-icon',
    messageClass: 'sn_notification-message',
    headingClass: 'sn_notification-heading'
  },
  icons: {
    success: icons.success,
    warning: icons.warning,
    error: icons.error,
    debug: icons.debug,
    loading: icons.loading
  },
  injectCss: false
});

Animation CSS provided

growWidth is used for showing duration of notification, rotation is used in loading icon.

@keyframes growWidth {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Notification

Displays a notification with a heading and message. Can be closed by clicking on it when enabled.

Returns an object if you need to remove it programmatically. e.g.: myNotification.remove().

Options

new Notification({
  type: 'success' | 'warning' | 'error' | 'debug', // Required
  heading: string, // Required
  message: string,
  duration: number | null, // Default: 3500 (ms), null for infinite
  clickToClose: boolean // Default: true
});

Example usage

import { Notification, configureNotifications } from 'notification-util';

configureNotification({}); // Required, but can be empty

new Notification({
  type: 'success',
  heading: 'Success heading',
  message: 'Success message'
});

Loader

Displays a spinning loader with a heading and message. Returns an object with methods to update the loader and close it.

Options

new Loader({
  heading: string, // Required
  message: string
});

Example usage

import { Loader, configureNotifications } from 'notification-util';

configureNotification({}); // Required, but can be empty

const myLoaderMessage = new Loader({
  heading: 'Loader heading',
  message: 'Loader message'
});

// some time passes

myLoaderMessage.update({
  heading: 'Updated heading',
  message: 'Updated message'
});

// some time passes

myLoaderMessage.close();