Popups

The Concord Popups API is used to display simple modal dialogs. It's a shortcut for creating instances of the Modal component.

The API currently only exports a single function: showPopup. This function was inspired by the native window.alert() and window.confirm() functions, but provides more configuration options and is asynchronous. showPopup returns a Promise<boolean | null> that resolves to true if the user clicks the primary button, false if the user clicks the secondary button (if present), or null if the popup is dismissed without any action.

Example Usage

import { showPopup } from "@jrgermain/concord";

// This example is an alternative to window.alert()
const AlertExample = () => {
  const handleClick = async () => {
    // Since we omit secondaryLabel, there will only be an OK button.
    // We await the Promise but ignore the value it resolves to because
    // we only care about the user seeing and dismissing the dialog.
    await showPopup({
      title: "Alert",
      message: "This is an alert.",
    });
  };
  return <button onClick={handleClick}>Show Alert</button>;
};

// This example is an alternative to window.confirm()
const ConfirmExample = () => {
  const handleClick = async () => {
    const result = await showPopup({
      title: "Confirm Deletion",
      message: "Are you sure you want to delete this item?",
      isDestructive: true,
      primaryLabel: "Delete",
      secondaryLabel: "Cancel",
    });
    if (result) {
      // User clicked Delete
      deleteItem();
    } else {
      // The dialog was closed with esc or the user hit the Cancel button.
      // If we wanted to treat those two cases differently, we could check
      // for result === null and result === false.
    }
  };
  return <button onClick={handleClick}>Show Alert</button>;
};