Simple Display Alert

Install Package

npm i @jaymago/simple-display-alert

Run Example Locally

# Clone the repository
git clone https://github.com/jaymagoit/simple-display-alert.git

# Navigate to example directory
cd simple-display-alert/example

# Install dependencies
npm install

# Start development server
npm run dev

1. Import the Package and Styles

// Import the package
import { 
    displayAlert,          // Generic alert function
    displayAlertSuccess,   // Success variant
    displayAlertError,     // Error variant
    displayAlertWarning,   // Warning variant
    displayAlertInfo,      // Info variant
    displayAlertLoader     // Loading variant
} from '@jaymago/simple-display-alert';

// Import the CSS (required)
import '@jaymago/simple-display-alert/dist/index.css';

2. Basic Examples

// Success message (green)
displayAlertSuccess('Operation completed successfully!');

// Error message (red)
displayAlertError('An error occurred!');

// Warning message (yellow)
displayAlertWarning('Please check your input');

// Info message (blue)
displayAlertInfo('This is an informational message');

// Loading message (with spinner)
displayAlertLoader('Loading...');

3. Advanced Usage with Options

// Success alert with custom position and animation
displayAlertSuccess('Success with options', { 
    position: 'top-right',     // Position in top-right corner
    fadeDirection: 'left'      // Slide in from right
});

// Error alert that stays visible and allows multiple alerts
displayAlertError('Error with options', { 
    timeout: 0,                // Stays indefinitely
    multiple: true            // Can stack with other alerts
});