Advanced Alert Notification System For Bootstrap 5 – AvalynxAlert.js

Preview:

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

Changelog:

v1.0.0 (06/05/2025)

• update

v0.0.9 (03/08/2025)

• assetscomposer.json added

v0.0.8 (05/29/2024)

• Bugfix

v0.0.6 (05/27/2024)

• Code optimization