Using BaseModal

BaseModal gives you a modal window with a dim backdrop and CANCEL-key close, wired to RPG Maker events via the bridge.

All modals in the demo app use based modal.

BaseModal – with custom content

File: menus/src/components/BaseModal.tsx

Props

• show: boolean — visible state

• onHide(force?: boolean) — called to close (backdrop click or CANCEL)

• className?: string — extra classes for sizing/styling

• children?: React.ReactNode

Behavior

• Subscribes to CANCEL_EVENT and calls onHide(true)

• Renders a backdrop and portals modal content

Example: simple dialog

import React, { useState } from 'react';
import BaseModal from '../../components/BaseModal';

const SimpleDialog: React.FC = () => {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open dialog</button>
      <BaseModal show={open} onHide={() => setOpen(false)} className="w-[640px] p-4">
        <h2 className="window-title">Hello</h2>
        <div className="p-2">This is a basic modal window.</div>
        <div className="p-2"><button onClick={() => setOpen(false)}>Close</button></div>
      </BaseModal>
    </div>
  );
};
export default SimpleDialog;

Tips

• Combine with InputContext if you need in-modal navigation.

• Prefer closing on CANCEL to match RPG conventions.

See also

• Confirm

• InputContext