JSPM – react-popup-alerts@1.0.1

Package Exports

react-popup-alerts
react-popup-alerts/dist/index.esm.js
react-popup-alerts/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-popup-alerts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A flexible and customizable popup alert system for React applications built with Context API and custom hooks.

View Demo | Report Bug | Request Feature

Features

✨ Multiple alert variants (info, success, warning, error, cancel, confirm)
🎣 Two usage patterns: Hook-based and Imperative
🔄 Alert queuing system
💬 Confirmation dialogs with callbacks
🎨 Customizable styling
📱 Responsive design
⚡ Lightweight and performant
🎯 TypeScript support (coming soon)

Installation

npm install react-popup-alerts react-bootstrap bootstrap react-icons

yarn add react-popup-alerts react-bootstrap bootstrap react-icons

Setup

Wrap your application with the AlertProvider:

import React from 'react';
import { AlertProvider } from 'react-popup-alerts';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <AlertProvider>
      {/* Your app components */}
    </AlertProvider>
  );
}

export default App;

Usage

Method 1: Imperative API (Recommended)

Use the alert object to trigger alerts from anywhere in your app:

import { alert } from 'react-popup-alerts';

function MyComponent() {
  const handleClick = () => {
    // Simple alerts
    alert.info('This is an info message');
    alert.success('Operation completed successfully!');
    alert.warning('Please be careful!');
    alert.error('Something went wrong!');
    
    // Confirmation dialog
    alert.confirm(
      'Are you sure you want to delete this item?',
      () => {
        // User clicked Yes
        console.log('Confirmed!');
      },
      () => {
        // User clicked Cancel
        console.log('Cancelled!');
      }
    );
  };

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

Method 2: Promise-based Confirmation

Use async/await with confirmation dialogs:

import { alert } from 'react-popup-alerts';

async function deleteUser() {
  const confirmed = await alert.confirmPromise('Delete this user?');
  
  if (confirmed) {
    // User clicked Yes
    await performDelete();
    alert.success('User deleted successfully!');
  } else {
    // User clicked Cancel
    alert.info('Deletion cancelled');
  }
}

Method 3: Hook-based API

Use the useAlert hook inside React components:

import { useAlert } from 'react-popup-alerts';

function MyComponent() {
  const { showAlert } = useAlert();

  const handleClick = () => {
    showAlert.info('This is an info message');
    showAlert.success('Success message');
    
    // With confirmation
    showAlert.confirm(
      'Are you sure?',
      () => console.log('Confirmed'),
      () => console.log('Cancelled')
    );
    
    // Promise-based
    const result = await showAlert.confirmPromise('Proceed with this action?');
  };

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

API Reference

Alert Variants

alert.info(message, isConfirm?, onConfirm?, onCancel?)
alert.success(message, isConfirm?, onConfirm?, onCancel?)
alert.warning(message, isConfirm?, onConfirm?, onCancel?)
alert.error(message, isConfirm?, onConfirm?, onCancel?)
alert.cancel(message, isConfirm?, onConfirm?, onCancel?)
alert.confirm(message, onConfirm?, onCancel?)
alert.confirmPromise(message, variant?) - Returns a Promise

Parameters

message (string): The message to display
isConfirm (boolean): Whether to show confirmation buttons (Yes/Cancel)
onConfirm (function): Callback when user clicks Yes
onCancel (function): Callback when user clicks Cancel
variant (string): Alert type for confirm method

Customization

You can customize the styling by overriding the CSS classes:

/* Override default styles */
.rpa-alert-modal .modal-content {
  border-radius: 10px !important;
}

.rpa-text-info {
  color: #your-color !important;
}

Use Cases

1. API Error Handling

import { alert } from 'react-popup-alerts';

async function fetchData() {
  try {
    const response = await api.getData();
    alert.success('Data loaded successfully!');
  } catch (error) {
    alert.error(error.message || 'Failed to load data');
  }
}

2. Form Validation

function handleSubmit(e) {
  e.preventDefault();
  
  if (!formData.email) {
    alert.warning('Please enter your email address');
    return;
  }
  
  // Submit form
}

3. Delete Confirmation

async function handleDelete(id) {
  const confirmed = await alert.confirmPromise(
    'Are you sure you want to delete this item? This action cannot be undone.',
    'warning'
  );
  
  if (confirmed) {
    await deleteItem(id);
    alert.success('Item deleted successfully!');
  }
}

4. Outside React Components

// In a utility file
import { alert } from 'react-popup-alerts';

export function apiErrorHandler(error) {
  if (error.status === 401) {
    alert.error('Session expired. Please login again.');
  } else if (error.status === 403) {
    alert.warning('You do not have permission to perform this action.');
  } else {
    alert.error('An unexpected error occurred.');
  }
}

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

Support

If you encounter any issues or have questions, please file an issue on GitHub.

react-popup-alerts