Using BaseMenuScreen

This tutorial shows how to build a new menu screen using the stock BaseMenuScreen class as a starting point and how to wire it into your UI flow.

All of the screens in the demo app use base menu screen.

BaseMenuScreen – Menu Menu

What you’ll learn

• What BaseMenuScreen props represent (pageData, isTestMenu, hasFocus).

• How to create a screen component that mounts inside a modal window.

• How to receive focus and handle inputs via InputContext.

Prerequisites

• You’ve built the UI at least once and see RPGReact overlay.

• Familiarity with React function/class components and props.

1) Understand BaseMenuScreen

File: menus/src/components/BaseMenuScreen.tsx

Props your screen will get:

• pageData?: any — data payload originating from the plugin/bridge for this page.

• isTestMenu: boolean — true when rendered in a test harness or dev menu.

• hasFocus: boolean — true when the screen (or a child widget) should respond to inputs.

BaseMenuScreen itself is a minimal class component that tracks an isOpen state you can piggyback on. It’s common to compose your own screen as a function component and not extend the class directly; the important bit is to accept the same prop shape so the container can pass them through.

2) Create a new screen

Create menus/src/views/menu/MyScreen.tsx:

import React from "react";
import BaseModal from "../../components/BaseModal";
import { BaseMenuScreenProps } from "../../components/BaseMenuScreen";

const MyScreen: React.FC<BaseMenuScreenProps & { show: boolean; onHide: () => void }>
  = (props) => {
  const { show, onHide, pageData, hasFocus } = props;

  return (
    <BaseModal show={show} onHide={onHide} className="w-[800px] h-fit p-4">
      <h2 className="window-title">My Screen</h2>
      <div className="content">
        <pre>{JSON.stringify(pageData, null, 2)}</pre>
        <p>Has focus: {String(hasFocus)}</p>
      </div>
    </BaseModal>
  );
};

export default MyScreen;

Notes

• We re-use BaseModal for window chrome and focus trapping.

• We accept show/onHide from the parent state machine controlling visibility.

3) Open your screen from a menu

Add a command somewhere (e.g., menus/src/views/menu/CommandMenu.tsx) to set state and show MyScreen when selected.

// inside your parent menu component
const [showMyScreen, setShowMyScreen] = useState(false);

const openMyScreen = () => setShowMyScreen(true);
const closeMyScreen = () => setShowMyScreen(false);

// in the JSX, a command that opens it
// onItemSelected={() => openMyScreen()}

<MyScreen show={showMyScreen} onHide={closeMyScreen}
          isTestMenu={props.isTestMenu} pageData={props.pageData} hasFocus={props.hasFocus} />

4) Handling input

If your screen needs keyboard/gamepad input, use InputContext (see the dedicated tutorial). The parent passes you hasFocus; you should only act on input when it’s true.

See also

• BaseModal — window chrome and closing behavior

• InputContext — routing inputs

• Chooser and ActorChooser — list selection inside screens