@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,
});

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]