Small Toast-like Notification Popup Library – notify-native.js

Category: Javascript , Notification | March 1, 2022
Author:sh3mahan
Views Total:394 views
Official Page:Go to website
Last Update:March 1, 2022
License:MIT

Preview:

Small Toast-like Notification Popup Library – notify-native.js

Description:

notify-native.js is a tiny library for creating toast-like notification popups with or without sound using native JavaScript.

How to use it:

1. Load the main stylesheet and notify-native.js library in the document.

<link rel="stylesheet" href="style/css/main.min.css" />
<script src="assets/script/notify.js"></script>

2. Initialize the notify-native.js.

const notify = new Notify();

3. Create an info toast notification.

notify.render({
  head: "Info",
  content: "A simple info alert—check it out!"
});

4. Additional themes:

  • Danger
  • Success
  • Warning
notify.render({
  head: "Danger",
  content: "A simple danger alert—check it out!"
  style: "danger",
});

5. Determine whether to play a sound when the notification is activated. Default: false.

notify.render({
  head: "Info",
  content: "A simple info alert—check it out!",
  sound: true,
});

6. Change the position of the notification: “top_left” or “bottom_right” (default: top_right).

notify.render({
  head: "Info",
  content: "A simple info alert—check it out!",
  corner: "top_right",
});

7. Set the delay in milliseconds. By default, the notification automatically dismisses itself after 5 seconds.

notify.render({
  head: "Info",
  content: "A simple info alert—check it out!",
  delay: 5000
});

8. Set the maximum number of notifications on the screen. Default: 10.

notify.render({
  head: "Info",
  content: "A simple info alert—check it out!",
  maxElem: 5
});

You Might Be Interested In:


Leave a Reply