Notify2

TS library for displaying notifications inside specific containers. It is possible to create several independent modules that will have a separate set of notifications.

This project was bootstrapped with Create Vite

You can check out the DEMO

Installation

npm install @alekstar79/notify2

or

yarn add @alekstar79/notify2

Usage

<div id="notifications"></div>

Specify styles

#notifications {
  min-height: 250px;
  width: 400px;
  padding: 10px;
  background-color: #f7f9ff;
  border-radius: 20px;
  border-color: #a8bbff;
  border-width: 2px;
  border-style: solid;
}

Create new module

let myNotifications = new ToastNotifier({
  container: '#notifications', // required
  onNotificationsCountChange: number => {
    console.log('Number of notifications', number)
  },
})

Create group (optional)

Groups used to operate with the subset of notifications. Group may have one or more elements. You can force the group to have only one element making field greedy equal to true. It is not necessary to create group, all notifications without specifying groupId will be associated with group with id default.

myNotifications.createEmptyGroup({
  id: 'test', // required
  greedy: false,
})

Add notifications

// pushNotification - appends new notification (is added from the bottom)
let myNotification1 = myNotifications.pushNotification({
  title: 'Hello!',
  message: "I'm a notification",
  animation: 'fade',  // 'fade' (by default), 'rotate'
  closeInMS: 5000,    // Notification will be closed automatically in specified amount of milliseconds; to prevent notification from closing, just omit this option. It does not close automatically by default.
  groupId: 'test',    // 'default' (by default)
  type: 'info',       // "info" (by default), "warning", "error", "success"
  template: ({ title, message }) => `<p>${title}</p>`, // Allows to create customized notifications. If used, type will be ignored.
})

// unshiftNotification - prepends new notification (is added from the top)
let myNotification2 = myNotifications.unshiftNotification({
  // same options as pushNotification
})

Remove notification

myNotification1.remove()

Remove all the notifications of the specified group

myNotifications.removeNotifications('test')

Remove all the notifications of the module

myNotifications.removeNotifications()

Customization

To add customized notidfications you have to:

Specify function which will return custom template, e.g.

const customTemplate = ({ title, message }) => {
  return `
    <div class='custom-notification'>
      <span>${title}</span>
      <span>${message}</span>
      <span class='mn-close-btn custom-close-btn'>[x]</span>
    </div>
  `
}

In order to make custom notification closable by user click assign class .mn-close-btn to the element which will trigger closing on click, e.g.

<span class="mn-close-btn">[x]</span>

And assign this function to template option:

customizedNotifsModule.pushNotification({
  title: 'Hello!',
  message: "I'm a custom notification",
  template: customTemplate,
})