@ehfuse/alerts

Getting Started

@ehfuse/alerts is a React alert and dialog component library with Material Design styling.

📋 Table of Contents

• Installation
• Basic Setup
• Your First Alert
• Using Dialogs
  • Setting up AlertProvider
  • Basic Alert Dialog
  • Confirm/Cancel Dialog
• Dynamic Alert Updates
• Next Steps
• Related Documentation

Installation

Install the package using npm:

npm install @ehfuse/alerts

Basic Setup

The library requires no initial setup. You can import and use it immediately.

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

Your First Alert

Let’s create the simplest form of alert:

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

function App() {
    const handleClick = () => {
        SuccessAlert("Task completed successfully!");
    };

    return <button onClick={handleClick}>Show Success Alert</button>;
}

Different Alert Types

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

function AlertExample() {
    return (
        <div>
            <button onClick={() => SuccessAlert("Success message")}>
                Success Alert
            </button>

            <button onClick={() => InfoAlert("Info message")}>
                Info Alert
            </button>

            <button onClick={() => WarningAlert("Warning message")}>
                Warning Alert
            </button>

            <button onClick={() => ErrorAlert("Error message")}>
                Error Alert
            </button>
        </div>
    );
}

Using with Titles

SuccessAlert("Success", "File uploaded successfully.");
InfoAlert("Notice", "New update available.");
WarningAlert("Warning", "Disk space is low.");
ErrorAlert("Error", "Please check your network connection.");

Using Dialogs

⚠️ Important: Before using dialogs, you must first wrap your application with AlertProvider.

Setting up AlertProvider

To use dialog functionality, you need to set up AlertProvider at the top level of your application:

import React from "react";
import { AlertProvider } from "@ehfuse/alerts";

function App() {
    return (
        <AlertProvider>
            {/* Rest of your app components */}
            <YourAppComponents />
        </AlertProvider>
    );
}

export default App;

Basic Alert Dialog

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

function DialogExample() {
    const showDialog = () => {
        AlertDialog({
            title: "Alert",
            message: "Task has been completed.",
            onConfirm: () => console.log("OK clicked"),
        });
    };

    return <button onClick={showDialog}>Show Dialog</button>;
}

Confirm/Cancel Dialog

ConfirmDialog can be used in two ways:

1. Promise approach (recommended):

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

function ConfirmExample() {
    const showConfirm = async () => {
        const result = await ConfirmDialog({
            title: "Confirm Delete",
            message: "Are you sure you want to delete this item?",
            confirmText: "Delete",
            cancelText: "Cancel",
        });

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

    return <button onClick={showConfirm}>Confirm Delete</button>;
}

2. Callback approach (same as AlertDialog):

function ConfirmExample() {
    const showConfirm = () => {
        ConfirmDialog({
            title: "Confirm Delete",
            message: "Are you sure you want to delete this item?",
            confirmText: "Delete",
            cancelText: "Cancel",
            onConfirm: () => {
                console.log("User confirmed deletion.");
            },
            onCancel: () => {
                console.log("User cancelled.");
            },
        });
    };

    return <button onClick={showConfirm}>Confirm Delete</button>;
}

Dynamic Alert Updates

You can update alert content in real-time after displaying it:

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

function SimpleProgressExample() {
    const handleProgress = async () => {
        // Create alert and get ID
        const alertId = InfoAlert({
            message: "Starting task...",
            autoHide: false,
        });

        // Simple update
        await new Promise((resolve) => setTimeout(resolve, 1000));
        updateAlert(alertId, {
            message: "Task in progress...",
        });

        await new Promise((resolve) => setTimeout(resolve, 1000));
        updateAlert(alertId, {
            message: "✅ Task completed!",
            autoHide: true,
            delay: 2000,
        });
    };

    return <button onClick={handleProgress}>Simple Progress</button>;
}

The updateAlert function allows you to dynamically change these properties:

• message: Alert message
• title: Alert title
• autoHide: Auto-hide enabled
• delay: Delay time
• showIcon: Show icon

Next Steps

Now that you’ve learned the basics, explore these advanced topics:

Positioning and Styling

• Display alerts at various positions (top, center, bottom, etc.)
• Anchor-based alerts (relative to specific elements)
• Mouse position alerts
• Custom styling

Advanced Features

• Complex progress tracking
• Global configuration and themes
• Performance optimization
• Utility functions

These advanced features are covered in detail in the Examples documentation.

Related Documentation

🌐 Online Documentation

• 📖 API Reference - Detailed description of all functions and interfaces
• 💡 Examples - Various use cases and code examples
• 🇰🇷 Korean Documentation - 한국어 문서

📱 Offline Access

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