@ehfuse/alerts

@ehfuse/alerts Usage Examples

This document provides various usage examples for the @ehfuse/alerts library.

Basic Alerts
Dynamic Alert Updates
Positional Alerts
Custom Styled Alerts
Using Dialogs

Basic Alerts

Simple Alert Display

import {
    SuccessAlert,
    InfoAlert,
    WarningAlert,
    ErrorAlert,
} from "@ehfuse/alerts";

// Basic alerts
SuccessAlert("Task completed successfully!");
InfoAlert("New information is available.");
WarningAlert("This requires attention.");
ErrorAlert("An error has occurred.");

Display with Title

// Display title and message together
SuccessAlert("Task Complete", "All tasks have been completed successfully.");
InfoAlert("System Notice", "New update available.");

Alert Configuration with Object

InfoAlert({
    message: "Alert displayed in the top right",
    title: "Positioned Alert",
    position: "topRight",
    duration: 4000,
    showIcon: true,
    autoHide: true,
});

Dynamic Alert Updates

Using updateAlert Function

The updateAlert function allows you to change the content of already displayed alerts in real-time.

import { InfoAlert, updateAlert, type AlertCommonProps } from "@ehfuse/alerts";

// Create alert and get ID
const alertId = InfoAlert({
    message: "Processing...",
    title: "Task Progress",
    autoHide: false,
});

// Update alert content
updateAlert(alertId, {
    message: "New message",
    title: "Updated title",
    showIcon: false,
    autoHide: true,
    delay: 3000,
});

AlertCommonProps Type

Properties that can be dynamically updated:

interface AlertCommonProps {
    message?: string; // Alert message
    title?: string; // Alert title
    autoHide?: boolean; // Auto-hide enabled
    delay?: number; // Delay time (milliseconds)
    showIcon?: boolean; // Show icon
}

Progress Tracking Example

Example of an alert that displays real-time progress:

const handleProgressAlert = async () => {
    // Create initial alert
    const alertId = InfoAlert({
        message: "Preparing task...",
        title: "Progress Tracking",
        autoHide: false,
        showIcon: true,
    });

    // Preparation phase
    await new Promise((resolve) => setTimeout(resolve, 500));
    updateAlert(alertId, {
        message: "Task in progress... 0%",
        title: "Progress Tracking",
    });

    // Progress updates (0~100%)
    for (let progress = 0; progress <= 100; progress += 10) {
        await new Promise((resolve) => setTimeout(resolve, 300));
        const emoji = progress < 50 ? "⏳" : progress < 90 ? "🔄" : "🎯";
        updateAlert(alertId, {
            message: `${emoji} Task in progress... ${progress}%`,
            title: `Progress Tracking (${progress}%)`,
        });
    }

    // Completion phase - hide icon and show completion message
    updateAlert(alertId, {
        message: "✅ All tasks completed!",
        title: "Task Complete",
        showIcon: false,
    });

    // Enable auto-close after 3 seconds
    setTimeout(() => {
        updateAlert(alertId, {
            autoHide: true,
            delay: 2000,
        });
    }, 1000);
};

Positional Alerts

Screen-relative Positions

// Top positions
InfoAlert({ message: "Top left alert", position: "topLeft" });
InfoAlert({ message: "Top center alert", position: "top" });
InfoAlert({ message: "Top right alert", position: "topRight" });

// Center positions
InfoAlert({ message: "Left center alert", position: "left" });
InfoAlert({ message: "Center alert", position: "center" });
InfoAlert({ message: "Right center alert", position: "right" });

// Bottom positions
InfoAlert({ message: "Bottom left alert", position: "bottomLeft" });
InfoAlert({ message: "Bottom center alert", position: "bottom" });
InfoAlert({ message: "Bottom right alert", position: "bottomRight" });

Mouse Position and Specific Coordinates

// Display at mouse position
InfoAlert({
    message: "Alert displayed at mouse position",
    position: "mouse",
});

// Display at specific coordinates
WarningAlert({
    message: "Alert displayed at specific position",
    x: 300,
    y: 200,
});

Anchor-based Alerts

const handleAnchorAlert = (event: React.MouseEvent) => {
    const anchorElement = event.currentTarget as HTMLElement;

    InfoAlert({
        message: "Alert positioned relative to button",
        position: "top",
        anchorEl: anchorElement,
        duration: 4000,
    });
};

// JSX
<button onClick={handleAnchorAlert}>Show Anchor Alert</button>;

Custom Styled Alerts

Delay Time and Auto-hide Configuration

// Alert that appears after 2 seconds
WarningAlert({
    message: "Alert that appears after 2 seconds",
    position: "bottom",
    duration: 3000,
    delay: 2000,
    showIcon: true,
});

// Alert that doesn't auto-close
InfoAlert({
    message: "Alert that must be manually closed",
    autoHide: false,
    showIcon: true,
});

Icon Control

// Alert with icon
SuccessAlert({
    message: "Alert with icon",
    showIcon: true,
});

// Clean alert without icon
InfoAlert({
    message: "Clean alert without icon",
    showIcon: false,
});

Using Dialogs

AlertDialog (OK button only)

import { AlertDialog } from "@ehfuse/alerts";

const showAlert = () => {
    AlertDialog({
        title: "Alert Dialog",
        message: "This is an AlertDialog. A dialog with only an OK button.",
        confirmText: "Got it",
        onConfirm: () => {
            SuccessAlert("AlertDialog confirmed!");
        },
    });
};

ConfirmDialog (OK/Cancel buttons)

import { ConfirmDialog } from "@ehfuse/alerts";

const showConfirm = async () => {
    const result = await ConfirmDialog({
        title: "Confirmation Dialog",
        message: "Do you want to continue?",
        confirmText: "Continue",
        cancelText: "Cancel",
        onConfirm: () => {
            SuccessAlert("User chose to confirm!");
        },
        onCancel: () => {
            InfoAlert("User chose to cancel!");
        },
    });

    if (result) {
        console.log("User confirmed");
    } else {
        console.log("User cancelled");
    }
};

Yes/No Style Dialog

const showYesNo = async () => {
    const result = await ConfirmDialog({
        title: "Yes/No Dialog",
        message: "Do you agree?",
        confirmText: "Yes",
        cancelText: "No",
        customStyles: {
            buttonType: "yes-no",
        },
    });
};

Global Alert Control

Close All Alerts

import { closeAllAlerts } from "@ehfuse/alerts";

const handleCloseAll = () => {
    closeAllAlerts();
};

Apply Global Configuration

import { configureAlerts, resetAlertConfig } from "@ehfuse/alerts";

// Apply global configuration
const applyGlobalConfig = () => {
    const config = {
        success: {
            backgroundColor: "#4caf50",
            textColor: "#ffffff",
            borderRadius: "12px",
            fontSize: "16px",
        },
        default: {
            duration: 4000,
            position: "topRight",
            showIcon: true,
            autoHide: true,
            topOffset: 72,
        },
    };

    configureAlerts(config);
};

// Reset configuration
const resetConfig = () => {
    resetAlertConfig();
};

Practical Usage Patterns

Form Validation Feedback

const validateForm = (formData: any) => {
    if (!formData.email) {
        ErrorAlert("Please enter your email.");
        return false;
    }

    if (!formData.password) {
        ErrorAlert("Please enter your password.");
        return false;
    }

    SuccessAlert("Form validation completed!");
    return true;
};

User Feedback Collection

const collectFeedback = async () => {
    const result = await ConfirmDialog({
        title: "Feedback",
        message: "Was this feature helpful?",
        confirmText: "Helpful",
        cancelText: "Needs Improvement",
    });

    if (result) {
        SuccessAlert("Thank you for your feedback! 😊");
    } else {
        InfoAlert("Thank you for your valuable input. We'll improve! 🔧");
    }
};

Best Practices

1. Choose Appropriate Alert Types

Success: Task completion, successful saves, etc.
Info: General information, status change notifications, etc.
Warning: Cautions, situations requiring confirmation, etc.
Error: Error occurrences, failed tasks, etc.

2. Consider User Experience

Use short duration for non-critical alerts
Set autoHide: false for progress indicators
Enable auto-close at appropriate times after completion

3. Performance Optimization

Avoid too frequent updateAlert calls
Clean up unnecessary alerts with closeAllAlerts
Prevent memory leaks by cleaning up on component unmount

Use these examples as reference to effectively utilize @ehfuse/alerts in various situations!

🌐 Online Documentation

🚀 Getting Started - Installation and basic usage
📖 API Reference - Complete API documentation
🇰🇷 Korean Documentation - 한국어 문서

📱 Offline Access

Documentation is also available in the node_modules/@ehfuse/alerts/docs/ folder after package installation.