Using Select Item

SelectItem is a global modal that allows the player to select an item from their inventory. It is used to handle the "Select Item" event command from RPG Maker MZ.

Files

• menus/src/components/SelectItem.tsx

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

Overview

SelectItem displays a filtered list of items from the party's inventory based on the requested item type (Regular Item, Key Item, etc.). When an item is selected, its ID is stored in a designated game variable.

API Usage

You can use the useSelectItem() hook to show the item selection modal.

import { useSelectItem } from './components/SelectItem';

const MyComponent = () => {
    const selectItem = useSelectItem();

    const onPickItem = async () => {
        const itemId = await selectItem.show({
            variableId: 10, // Result will be stored here
            itypeId: 1      // 1: Regular, 2: Key, 3: Hidden A, 4: Hidden B
        });

        if (itemId) {
            console.log("Player selected item ID:", itemId);
        } else {
            console.log("Selection cancelled");
        }
    };
};

Options (SelectItemOptions)

Property	Type	Description
variableId	number	The ID of the $gameVariables where the result will be stored.
itypeId	number	The item type category to display (matches RMMZ itypeId).

Integration with RPG Maker MZ

1. Automatic Trigger: The message system and interpreter are hooked to intercept the "Select Item" command and show this React modal instead of the default window.

2. Result Storage: When a selection is made, it calls rt.gameMessage.setItemChoiceValue(itemId), which updates the specified game variable in the engine.

3. Flow Control: Like InputNumber, it automatically calls endMessage() to allow the event interpreter to continue.

UI Components

• Chooser: Uses the internal Chooser component for list navigation.

• BaseModal: Provides the standard modal backdrop and centering.

• Empty State: Displays "No items available" if the inventory has no items matching the filter.