Using Confirm

Confirm is a global confirm dialog system you trigger from anywhere using the useConfirm() hook. It queues requests and renders a modal with OK/Cancel, wired to RPG Maker inputs (OK/Cancel/Left/Right).

Files

• menus/src/components/Confirm.tsx

• Provider is mounted in menus/src/index.tsx

Confirm dialog – default

Provider setup

Ensure your root is wrapped with the provider (already done in this repo):

import { ConfirmProvider } from './components/Confirm';

root.render(
  <ConfirmProvider>
    <App />
  </ConfirmProvider>
);

Show a confirm dialog

import React from 'react';
import { useConfirm } from '../../components/Confirm';

const DangerousAction: React.FC = () => {
  const confirm = useConfirm();

  const onDelete = async () => {
    const ok = await confirm.show({
      title: 'Delete file?',
      message: 'This cannot be undone.',
      confirmText: 'Delete',
      cancelText: 'Cancel',
      confirmVariant: 'primary',
    });
    if (ok) {
      // perform action
    }
  };

  return <button onClick={onDelete}>Delete</button>;
};
export default DangerousAction;

Options (ConfirmOptions)

• title?: string

• message?: React.ReactNode

• confirmText?: string, cancelText?: string

• confirmVariant?: 'primary'|'secondary', cancelVariant?: 'primary'|'secondary'

• disableBackdropClose?: boolean

• children?: React.ReactNode — extra JSX inside the dialog

Input behavior

Handled via InputContext internally:

• CANCEL closes as Cancel

• OK confirms

• LEFT/RIGHT toggles the selection

See also

• BaseModal

• InputContext