Ark JS Alert Library

A lightweight, customizable toast notification library for web applications

Introduction

Ark JS Alert is a simple yet powerful JavaScript library for displaying toast notifications in web applications. It's lightweight, customizable, and easy to integrate into any project.

This documentation provides detailed information about all available functions, their parameters, and usage examples.

Quick Start

To get started with Ark JS Alert, include the library in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/ark-js-alert@latest/ark-alert.js"></script>

Then call any of the available functions:

// Display a simple success message ark_alert.alert("s", "Operation completed successfully!");

Function Reference

arkAlert.success(message, duration, options)

Displays a success notification with a green color scheme.

Parameter Type Default Description
message String Required The text content to display in the toast
duration Number 3000 Duration in milliseconds before the toast automatically closes
options Object {} Additional configuration options (see below)

Example:

// Basic usage ark_alert.alert("s", "Operation completed successfully! Disappears in 3 secons)", 3000); // With custom duration ark_alert.success("Data saved successfully!, manually close it");

arkAlert.error(message, duration, options)

Displays an error notification with a red color scheme.

Parameter Type Default Description
message String Required The text content to display in the toast
duration Number 5000 Duration in milliseconds before the toast automatically closes
options Object {} Additional configuration options (see below)

Example:

// Basic usage arkAlert.error("Something went wrong!"); // With custom duration and position arkAlert.error("Failed to load data!", 7000, { position: 'bottom-center' });

arkAlert.warning(message, duration, options)

Displays a warning notification with an orange color scheme.

Parameter Type Default Description
message String Required The text content to display in the toast
duration Number 4000 Duration in milliseconds before the toast automatically closes
options Object {} Additional configuration options (see below)

Example:

// Basic usage arkAlert.warning("Please check your input!"); // With custom duration and position arkAlert.warning("Session will expire soon!", 6000, { position: 'top-left' });

arkAlert.info(message, duration, options)

Displays an informational notification with a blue color scheme.

Parameter Type Default Description
message String Required The text content to display in the toast
duration Number 4000 Duration in milliseconds before the toast automatically closes
options Object {} Additional configuration options (see below)

Example:

// Basic usage arkAlert.info("New update available!"); // With custom duration and position arkAlert.info("Your profile has been updated.", 5000, { position: 'bottom-right' });

arkAlert.custom(message, type, duration, options)

Displays a custom notification with specified type and styling.

Parameter Type Default Description
message String Required The text content to display in the toast
type String 'info' The type of notification (success, error, warning, info, or custom)
duration Number 4000 Duration in milliseconds before the toast automatically closes
options Object {} Additional configuration options (see below)

Example:

// Basic usage arkAlert.custom("Custom notification!", "info"); // With custom styling arkAlert.custom("Special message!", "custom", 5000, { backgroundColor: '#8e44ad', textColor: '#fff' });

Configuration Options

The options parameter allows you to customize the appearance and behavior of the notifications.

Option Type Default Description
position String 'top-right' Position of the toast. Options: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'
backgroundColor String Type-dependent Custom background color for the toast
textColor String '#fff' Custom text color for the toast
closeButton Boolean true Whether to show a close button
progressBar Boolean true Whether to show a progress bar indicating remaining time
animation String 'fade' Animation type. Options: 'fade', 'slide', 'zoom'

Example with Custom Options:

function showCustomToast() { arkAlert.success("Custom styled toast!", 5000, { position: 'bottom-center', backgroundColor: '#2ecc71', textColor: '#fff', closeButton: true, progressBar: true, animation: 'slide' }); }

Global Configuration

You can set global defaults for all notifications using the setDefaults method.

Example:

// Set global defaults arkAlert.setDefaults({ duration: 5000, position: 'top-center', closeButton: true, progressBar: true }); // All subsequent notifications will use these defaults arkAlert.success("This uses global defaults!");

Advanced Usage

For more advanced use cases, you can chain multiple notifications or use callbacks.

Chaining Notifications:

function showChainedNotifications() { arkAlert.info("Processing request...", 2000); setTimeout(() => { arkAlert.success("Request completed!", 3000); }, 2500); }

Using Callbacks:

function showToastWithCallback() { arkAlert.info("Action in progress...", 3000, { onClose: function() { arkAlert.success("Action completed!"); } }); }