Dialogs
Displays native system dialogs and alerts using enterprise-grade Next.js/React integrations.
Overview
The Dialogs API provides a robust mechanism to trigger native modal dialogs, ensuring a consistent user experience that matches the design language of the host operating system. It allows you to display alerts, confirmation prompts, and input dialogs seamlessly.
Installation
This plugin is installed by default in EasyCord projects.
API Reference
alert(options)
Displays a native alert dialog with a single dismissal button. Use this to notify users of important information or successful operations.
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
title | string | Yes | The title of the dialog. |
message | string | Yes | The body text of the dialog. |
buttonText | string | No | The text on the button. Defaults to "OK". |
Returns
Promise<void> - Resolves when the user closes the dialog.
confirm(options)
Displays a native confirmation dialog with two buttons. Use this for destructive actions or important user decisions.
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
title | string | Yes | The title of the dialog. |
message | string | Yes | The body text of the dialog. |
okButtonText | string | No | The text on the primary button. Defaults to "OK". |
cancelButtonText | string | No | The text on the secondary button. Defaults to "Cancel". |
Returns
Promise<boolean> - Resolves to true if the primary button is pressed, false otherwise.
React / Next.js Examples
Handling Critical Deletions
This example demonstrates how to use confirm() within a modern React component to verify a destructive action before proceeding.
import React, { useState } from 'react';
export default function DeleteAccountSettings() {
const [isDeleting, setIsDeleting] = useState(false);
const handleDelete = async () => {
try {
const confirmed = await window.easycord.dialogs.confirm({
title: "Delete Account",
message: "Are you absolutely sure you want to permanently delete your account? This action cannot be undone.",
okButtonText: "Delete Permanently",
cancelButtonText: "Cancel",
});
if (confirmed) {
setIsDeleting(true);
// Call your API route or backend service
await fetch('/api/user/delete', { method: 'POST' });
await window.easycord.dialogs.alert({
title: "Account Deleted",
message: "Your account has been successfully deleted.",
buttonText: "Understood"
});
window.location.href = '/goodbye';
}
} catch (error) {
console.error("Failed to present dialog:", error);
} finally {
setIsDeleting(false);
}
};
return (
<div className="p-6 bg-white rounded-lg shadow-sm border border-red-100">
<h2 className="text-xl font-semibold text-red-600 mb-4">Danger Zone</h2>
<button
onClick={handleDelete}
disabled={isDeleting}
className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 disabled:opacity-50"
>
{isDeleting ? "Processing..." : "Delete Account"}
</button>
</div>
);
}