Advanced Alert Notification System For Bootstrap 5 – AvalynxAlert.js

Category: Javascript , Notification | February 27, 2024
Author:avalynx
Views Total:123 views
Official Page:Go to website
Last Update:February 27, 2024
License:MIT

Preview:

Advanced Alert Notification System For Bootstrap 5 – AvalynxAlert.js

Description:

AvalynxAlert is a lightweight JavaScript notification library that provides customizable, positioned alerts to enhance user feedback in your applications.

It integrates with Bootstrap 5.3 or higher, giving you a range of alert options and complete control over their appearance and behavior.

How to use it:

1. To get started, make sure you have the latest Bootstrap 5 framework installed in your project.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Load the AvalynxAlert’s JavaScript and Stylesheet.

<link href="/dist/css/avalynx-alert.css" rel="stylesheet">
<script src="/dist/js/avalynx-alert.js"></script>

3. You can also install and import the AvalynxAlert with NPM.

# NPM
$ npm install avalynx-alert
import { AvalynxAlert } from 'avalynx-alert';
import 'avalynx-alert/dist/css/avalynx-alert.min.css';

4. Create a new AvalynxAlert instance, define the alert message, and specify the notification type (primary, secondary, success, danger, warning, info, light, or dark) as follows:

new AvalynxAlert('Alert Message Here', 'success');

5. Customize the alert message by overriding the default options listed blow:

new AvalynxAlert('Alert Message', 'success',{
    // auto-dismiss after this timeout
    duration: 5000,
    autoClose: true,
    // 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'. Default is 'top-center'
    position: 'top-center',
    // is dismissable?
    closeable: true,
    // max width of the alert box
    width: '400px',
    // callback
    onClose: null,
    
}),

You Might Be Interested In:


Leave a Reply