Simple Lightweight Alert Notification Library – Custom Alerts

Preview:

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,
})