Simple Lightweight Alert Notification Library – Custom Alerts

Category: Javascript , Notification | May 18, 2022
Author:oscarcweb
Views Total:78 views
Official Page:Go to website
Last Update:May 18, 2022
License:MIT

Preview:

Simple Lightweight Alert Notification Library – Custom Alerts

Description:

A vanilla JavaScript library that helps you create snazzy-looking alert notifications using HTML, CSS, and JavaScript.

Lightweight (gzip/min ~1kb!), dependency-free, and was built to meet the following requirements:

  • Various types of notifications: Info, Warning, Danger
  • Auto dismisses just like a toast.
  • Custom alert title and message.
  • Supports any content type.
  • Delay the display of the alert notification.

How to use it:

1. Load the JavaScript CustomAlerts.min.js and Stylesheet CustomAlerts.min.css.

<link href="src/CustomAlerts.min.css" rel="stylesheet" />
<script src="src/CustomAlerts.min.js"></script>

2. Initialize the Custom Alerts.

let alerts = new CustomAlerts({
    // options here
});
3. Display a default alert notification on the screen.
alerts.alert({
  title: 'Default Alert',
  content: 'Hello World!',
})

4. Set the type of the alert: ‘info’, ‘warning’, or ‘danger’.

alerts.alert({
  type: 'info',
  title: 'Info Alert',
  content: 'Hello World!',
})
alerts.alert({
  type: 'warning',
  title: 'Warning Alert',
  content: 'Hello World!',
})
alerts.alert({
  type: 'danger',
  title: 'Danger Alert',
  content: '<b>HTML CONTENT</b>!',
})

5. Create a toast-like alert notification.

alerts.alert({
  title: 'Default Alert',
  content: 'Hello World!',
  autoclose: 5000,
})

6. Delay the display of the alert notification.

alerts.alert({
  title: 'Default Alert',
  content: 'Hello World!',
  delay: 5000,
})

You Might Be Interested In:


Leave a Reply