Rence Alert

Current version: v1.0.0

A beautiful, responsive, customizable, and accessible replacement for JavaScript's standard popup boxes.

Strict Material Design 3

Examples

A basic success message

RenceAlert.success(
  "Good job!", 
  "You clicked the button!"
);

A title with a text under

RenceAlert.fire({
  title: "The Internet?",
  text: "That thing is still around?",
  icon: "info"
});

A modal with a title, an error icon, and a text

RenceAlert.fire({
  title: "Oops...",
  text: "Something went wrong!",
  icon: "error"
});

A dialog with a cancel button

RenceAlert.fire({
  title: "Are you sure?",
  text: "You won't be able to revert this!",
  icon: "warning",
  showCancelButton: true,
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel!"
}).then((result) => {
  if (result.isConfirmed) {
    RenceAlert.success("Deleted!", "Your file has been deleted.");
  } else if (result.isDismissed) {
    RenceAlert.error("Cancelled", "Your imaginary file is safe :)");
  }
});

Advanced Customization (Colors, Width, BG)

You can resize the card, change button colors, or even update the icon colors dynamically.

RenceAlert.fire({
  title: 'Custom Style!',
  text: 'Custom width and colors.',
  icon: 'success',
  width: '600px',
  confirmButtonColor: '#00BFA5',
  iconColor: '#00BFA5',
  background: '#f0fdfa'
});

Advanced Toast Notifications

Toasts now support multiple positions, timers, and progress indicators.

// Object based configuration
RenceAlert.toast({
  title: "Top Center",
  text: "Attention grabber",
  type: "warning",
  position: "top-center",
  timer: 3000,
  showProgressBar: true
});

Snackbar style (Bottom)

// Fire a premium Material Design snackbar
RenceAlert.snackbar("Action successful", "RETRY");

Modern Linear Loading Indicator

Perfect for simulated sign-in or data fetching states at the top of the viewport.

// Show thin indeterminate progress bar at the top
RenceAlert.showLoading();

// Hide it when task is complete
RenceAlert.hideLoading();

Question / Confirmation Dialog

RenceAlert.question(
  "Are you sure?", 
  "This will permanently delete the item."
);

Download & Install

Install via NPM

npm install rence-alert

Or grab from jsDelivr CDN

Use the following CDN links to include Rence Alert in your project instantly.

Via NPM (Highly Recommended)

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rence-alert@latest/public/rence-alert.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/rence-alert@latest/public/rence-alert.js"></script>

Via GitHub (Legacy)

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/DavidAbalaku/Rence-Alert@main/public/rence-alert.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/DavidAbalaku/Rence-Alert@main/public/rence-alert.js"></script>

Usage

1. Usage in HTML / JavaScript

After importing the script via CDN, the RenceAlert object will be available globally on the window. You can trigger it inside standard functions.

<!-- Include CDN in head -->
<button onclick="showAlert()">Test</button>

<script>
  function showAlert() {
    RenceAlert.success('Saved!', 'Your settings are updated.');
  }
</script>

2. Usage in React / Next.js

You can import the module directly into your Client Components. There is no need to manually append scripts if you use the NPM package.

import { RenceAlert } from 'rence-alert';

export default function DeleteButton() {
  const handleDelete = () => {
    RenceAlert.fire({
      title: 'Warning',
      text: 'Do you want to drop this database?',
      icon: 'warning',
      showCancelButton: true
    }).then((res) => {
      if(res.isConfirmed) console.log("Database Deleted");
    });
  };

  return <button onClick={handleDelete}>Delete</button>;
}

Configuration Params

Argument	Default Value	Description
title	''	The main heading of the popup.
text	''	The secondary body description under the title.
icon	'info'	Select the Material animated icon. Valid options: `'success'`, `'error'`, `'warning'`, `'info'`.
confirmButtonText	'OK'	Change the text of the main positive action button.
showCancelButton	false	Set to `true` to display a dismissive cancel button.
cancelButtonText	'Cancel'	Change the text of the cancel button (only visible if `showCancelButton` is true).