alertbox-for-react - Zero Dependency Alert & Confirmation Popups

Powerful Features

Everything you need for modern alert management

Zero Dependencies

No bundlers, external utilities, or styling preprocessors. Pure React Hooks – that's all you need.

Promise-Driven API

Handle confirmations natively using async/await. Write cleaner, more intuitive code.

Built-in Async Loaders

Pass async handlers to display reactive loader spinners and prevent double-submits automatically.

Deep Customization

Customize colors, fonts, margins, and alignments via declarative element-targeted config objects.

Pure React Hooks

Built on useState, useRef, and useContext. No class components, no complexity.

Lightweight

Ultra-minimal footprint with clean layout out of the box. No bloat.

📥 Installation

Install via npm:

npm install alertbox-for-react

Requirements: React version ^16.8.0, ^17.0.0, ^18.0.0, or ^19.0.0 as a peer dependency.

🚀 Setup Guide

Wrap your application tree inside the AlertProvider:

import React from 'react';
import { AlertProvider } from 'alertbox-for-react';
import Dashboard from './Dashboard';

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

export default App;

💻 Code Recipes

1

Simple Alert Popup

Ideal for standard notifications or confirmation modals requiring a simple close or action choice.

import { useAlert } from 'alertbox-for-react';

export default function SimpleDemo() {
  const alert = useAlert();

  const handleOpenAlert = () => {
    alert.show({
      title: "Discard Draft?",
      message: "Are you sure...",
      confirmText: "Discard",
      cancelText: "Keep Editing",
      showCancel: true
    });
  };

  return (
    <button onClick={handleOpenAlert}>
      Delete Draft
    </button>
  );
}

Output: A simple alert with confirmation and cancel buttons.

2

Async with Built-in Loader

When you map an async function block to onConfirm, the system intercepts the lifecycle, locks down buttons, and shows a spinner.

const handleDeleteDB = async () => {
  const confirmed = await alert.show({
    title: "Purge Cluster",
    message: "This will disconnect...",
    confirmText: "Purge Cluster",
    onConfirm: async () => {
      await new Promise(
        (resolve) => setTimeout(
          resolve, 3000
        )
      );
      console.log("Purged!");
    }
  });

  if (confirmed) {
    alert.show({ 
      title: "Success!" 
    });
  }
};

Output: Loading spinner appears during async operation. Auto-dismiss on completion.

3

Deep Customization with Themes

The package uses zero external stylesheets. Style adjustments are handled via inline mappings and custom style objects.

const handleDarkTheme = () => {
  alert.show({
    title: "Threat Blocked",
    message: "Packet mitigated.",
    style: {
      overlay: { 
        backgroundColor: 'rgba(255, 255, 255, 0.50)'
      },
      box: { 
        backgroundColor: '#1e293b',
        border: '1px solid #334155',
      },
      title: { 
        color: '#ef4444',
        fontWeight: 'bold'
      },
      message: { 
            color: '#334155'
      },
      confirmBtn: { 
        backgroundColor: '#ef4444',
        color: '#ffffff'
      }
    }
  });
};

Output: Dark-themed alert with custom colors and styling.

⚙️ Configuration API Reference

Alert.show() Parameters

Parameter	Type	Default	Description
title	String	'Alert'	Prominent header text at the top
message	String	''	Descriptive message or body text
confirmText	String	'Confirm'	Confirmation button label
cancelText	String	'Cancel'	Cancel button label
showCancel	Boolean	true	Show/hide cancel button
onConfirm	Function	undefined	Callback executed on confirm (sync/async)
style	Object	{}	Custom inline CSS declarations

Style Customization Nodes

Pass CSS properties within these dictionary target keys:

overlay - Background dimming
box - Main container
title - Heading typography
message - Body text

actions - Button container
btn - Base button styles
confirmBtn - Confirm styling
cancelBtn - Cancel styling

Ready to Get Started?

Install react-alert-box and streamline your alert management in seconds.

View on GitHub

Elegant Alert & Confirmation Popups