@ehfuse/alerts

Lightweight Material Design styled alert and dialog components for React applications

React 애플리케이션을 위한 가볍고 Material Design 스타일의 알림 및 다이얼로그 컴포넌트

Features | 주요 기능

• 🎯 Multiple alert types (success, info, warning, error) | 다양한 알림 타입
• 📍 Flexible positioning (9 positions + mouse position + anchor-based) | 유연한 위치 설정 (앵커 기반 포함)
• ⚓ Anchor-based alerts relative to DOM elements | DOM 요소 기준 앵커 기반 알림
• 🎨 Powerful customization with global configuration | 전역 설정을 통한 강력한 커스터마이징
• 🔧 Custom icons and styling support | 커스텀 아이콘 및 스타일링 지원
• 💬 Confirmation dialogs with full customization | 완전 커스터마이징 가능한 확인 다이얼로그
• 📱 Responsive design | 반응형 디자인
• ⚡ TypeScript support | TypeScript 지원
• ✨ Lightweight and fast | 가볍고 빠름

Quick Start

npm install @ehfuse/alerts

Core Functions | 핵심 함수들

| Function | Type | Description | Requires AlertProvider | | ----------------------------------- | ------ | ----------------------------------------------- | ---------------------- | | SuccessAlert() | Alert | Success message notification | ❌ No | | InfoAlert() | Alert | Information message notification | ❌ No | | WarningAlert() | Alert | Warning message notification | ❌ No | | ErrorAlert() | Alert | Error message notification | ❌ No | | updateAlert() | Alert | Update existing alert content | ❌ No | | AlertDialog() | Dialog | Customizable alert dialog with confirm button | ✅ Yes | | ConfirmDialog() | Dialog | Confirmation dialog with confirm/cancel options | ✅ Yes |

Usage Examples | 사용 예제

Basic Alerts | 기본 알림

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

// Simple alerts (no provider needed)
SuccessAlert("Operation completed successfully!");
InfoAlert("Here is some information");
WarningAlert("Please check your input");
ErrorAlert("Something went wrong");

// With options
const alertId = SuccessAlert("Loading...", {
    position: "top-right",
    duration: 0, // persistent
    showIcon: true,
});

// Update the alert
updateAlert(alertId, {
    message: "Loading complete!",
    duration: 3000,
});

Confirm Button Alerts | 확인 버튼 알림

Pass confirmText to render a confirm button inside the toast. The user must dismiss it explicitly — great for messages that need acknowledgment (e.g. POS payment failures) without using a full-screen modal.

confirmText를 주면 토스트 알림 안에 확인 버튼이 렌더됩니다. 사용자가 직접 닫아야 하는 안내(예: POS 결제 실패)에 적합합니다.

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

ErrorAlert({
    title: "카드리더기를 확인해 주세요",
    message: [
        "매장 PC에 카드리더기가 인식되지 않습니다.",
        "",
        "· 리더기 USB 케이블과 전원을 확인해 주세요",
        "· SecureVCAT 프로그램을 종료 후 다시 실행해 주세요",
        "",
        "(단말기 응답: XX90 통신실패)",
    ].join("\n"),
    confirmText: "확인", // 확인 버튼 텍스트 (기본값 "확인")
    onConfirm: () => {
        // 닫힌 뒤 호출됨 (닫힘은 라이브러리가 처리)
        console.log("사용자가 확인했습니다");
    },
});

Behavior | 동작:

• confirmText가 있으면 autoHide 기본값이 false 가 됩니다(사용자가 직접 확인해야 함).
• 확인 버튼 클릭 / Enter / Esc로 닫히며, 닫힌 뒤 onConfirm이 호출됩니다. 알림이 뜨면 확인 버튼에 자동 포커스됩니다.
• 여러 알림이 쌓여도 각 알림의 버튼은 자기 알림만 닫습니다.
• closeAllAlerts()로 닫힐 때는 onConfirm이 호출되지 않습니다.
• Success / Info / Warning / Error / Alert 의 객체 파라미터에서 모두 동작합니다. 문자열 오버로드는 기존과 동일합니다.

Auto-close with countdown | 자동 닫힘 + 카운트다운:

confirmText와 함께 duration을 주면(또는 autoHide: true) 자동 닫힘이 켜지고, 확인 버튼에 남은 초가 카운트다운으로 표시됩니다 (확인 (8) → 확인 (7) …). 카운트가 끝나 자동으로 닫히면 onConfirm은 호출되지 않고, 사용자가 그 전에 버튼을 누르면 즉시 닫히며 onConfirm이 호출됩니다.

WarningAlert({
    title: "세션 만료 임박",
    message: "잠시 후 자동으로 닫힙니다.",
    confirmText: "확인", // 버튼에 "확인 (8)" 처럼 남은 초가 표시됨
    duration: 8000, // 8초 후 자동 닫힘 (autoHide 자동 on)
    onConfirm: () => console.log("사용자가 직접 확인"),
});

Button style | 버튼 스타일 — configureAlerts의 severity별 confirmButton으로 커스터마이즈할 수 있습니다:

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

configureAlerts({
    error: {
        confirmButton: {
            backgroundColor: "#d32f2f",
            color: "#ffffff",
            borderRadius: 6,
            // borderColor, fontSize, fontWeight, padding, hoverBackgroundColor ...
        },
    },
});

Dialogs | 다이얼로그

import { AlertProvider, AlertDialog, ConfirmDialog } from "@ehfuse/alerts";

function App() {
    return (
        <AlertProvider>
            <YourComponent />
        </AlertProvider>
    );
}

function YourComponent() {
    const handleAlert = () => {
        AlertDialog("Alert Title", "This is an alert message");
    };

    const handleConfirm = () => {
        ConfirmDialog(
            "Delete Item",
            "Are you sure you want to delete this item?"
        ).then((result) => {
            if (result) {
                console.log("User confirmed");
            }
        });
    };

    return (
        <div>
            <button onClick={handleAlert}>Show Alert</button>
            <button onClick={handleConfirm}>Show Confirm</button>
        </div>
    );
}

Documentation

🌐 Online Documentation

📖 Complete Documentation Website - 온라인 문서 사이트

📚 Korean Documentation | 한국어 문서

• 시작하기 - 설치 및 기본 사용법
• API 참조 - 모든 함수와 인터페이스의 상세한 설명
• 예제 - 다양한 사용 사례와 코드 예제

📚 English Documentation | 영문 문서

• Getting Started - Installation and basic usage
• API Reference - Detailed description of all functions and interfaces
• Examples - Various use cases and code examples

License

MIT License

Author

KIM YOUNG JIN
Email: [email protected]