avalynx/avalynx-alert

AvalynxAlert is a simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.

0.0.8 2024-05-29 21:10 UTC

Requires

• twbs/bootstrap: ^5.3

MIT

• Juergen Schwind

• bootstrap
• notification
• component
• alert
• popup
• bootstrap5
• avalynx

README

AvalynxAlert is a lightweight, dependency-free alert system designed for web applications. It leverages Bootstrap (version 5.3 or higher) to provide a seamless integration with your project, offering a range of customizable alerts that can be positioned anywhere on the screen.

Features

• Customizable Alerts: Supports various alert types like primary, secondary, success, danger, warning, info, light, and dark.
• Flexible Positioning: Choose from predefined positions such as top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.
• Duration Control: Set the duration for how long the alert should be displayed.
• Closeable Alerts: Optionally allow users to close alerts.
• AutoClose Functionality: Alerts can automatically disappear after a certain period.
• Easy to Use: Simple API for creating and managing alerts within your web applications.

Example

Here's a simple example of how to use AvalynxAlert in your project:

• Overview
• Random alerts
• Callback on close
• Random alerts every 3 seconds

Installation

To use AvalynxAlert in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxAlert to work correctly.

First, include Bootstrap:

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>

Then, include AvalynxAlert:

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

Replace path/to/avalynx-alert.js and path/to/avalynx-alert.css with the actual path to the files in your project.

Installation via jsDelivr (Link)

AvalynxAlert is also available via jsDelivr. You can include it in your project like this:

<link href="https://cdn.jsdelivr.net/npm/avalynx-alert@0.0.8/dist/css/avalynx-alert.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/avalynx-alert@0.0.8/dist/js/avalynx-alert.js"></script>

Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.

Installation via NPM (Link)

AvalynxAlert is also available as a npm package. You can add it to your project with the following command:

npm install avalynx-alert

After installing, you can import AvalynxAlert into your JavaScript file like this:

import { AvalynxAlert } from 'avalynx-alert';
import 'avalynx-alert/dist/css/avalynx-alert.min.css';

Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.

Installation via Symfony AssetMapper

php bin/console importmap:require avalynx-alert

After installing, you can import AvalynxAlert into your JavaScript file like this:

import { AvalynxAlert } from 'avalynx-alert';
import 'avalynx-alert/dist/css/avalynx-alert.min.css';

Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.

Installation via Composer (Link)

AvalynxAlert is also available as a Composer package. You can add it to your project with the following command:

composer require avalynx/avalynx-alert

After installing, you can import AvalynxAlert into your HTML file like this:

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

Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.

Usage

To create an alert, simply instantiate a new AvalynxAlert object with the desired options:

new AvalynxAlert('Your message here', 'success', {
  duration: 5000,
  position: 'top-right',
  closeable: true,
  autoClose: true,
  width: '400px'
});

Options

AvalynxAlert allows the following options for customization:

• message: (string) The message to display in the alert (default: '').
• type: (string) The type of alert. One of (primary, secondary, success, danger, warning, info, light, dark) (default: 'info').
• options: An object containing the following keys:
  • duration: (number) Duration in milliseconds for the alert to be displayed (default: 5000).
  • position: (string) Position of the alert on the screen. One of top-left, top-center, top-right, bottom-left, bottom-center, bottom-right (default: 'top-right').
  • closeable: (boolean) Whether the alert can be closed by the user (default: true).
  • autoClose: (boolean) Whether the alert will close automatically after the duration (default: true).
  • width: (string) The width of the alert (default: 400px).
  • onClose: (function) A callback function to execute when the alert is closed (default: null).

Contributing

Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas:

• Bug fixes
• Feature enhancements
• Documentation improvements

Before submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.

License

AvalynxAlert is open-sourced software licensed under the MIT license.

Contact

If you have any questions, feature requests, or issues, please open an issue on our GitHub repository or submit a pull request.

Thank you for considering AvalynxAlert for your project!