Using Input Number

InputNumber is a global modal for numeric input, consistent with RPG Maker MZ's "Input Number" event command. It provides a numpad-style interface that works with keyboard, mouse, and gamepad.

Files

• menus/src/components/InputNumber.tsx

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

Basic Usage

You can trigger the input from any component using the useInputNumber() hook.

import { useInputNumber } from './components/InputNumber';

const MyComponent = () => {
    const inputNumber = useInputNumber();

    const onEnterAmount = async () => {
        const result = await inputNumber.show({
            title: "How many?",
            value: 1,
            min: 1,
            max: 99
        });
        
        if (result !== null) {
            console.log("User entered:", result);
        } else {
            console.log("User cancelled");
        }
    };

    return <button onClick={onEnterAmount}>Set Amount</button>;
};

Options (InputNumberOptions)

Property	Type	Description
value	number	Initial value (default: 0).
min	number	Minimum allowed value.
max	number	Maximum allowed value.
title	string	Optional title displayed above the input.
layout	KeyLayout	Optional custom key layout (overrides default numpad).

Integration with RPG Maker MZ

The component automatically handles integration with the RPG Maker engine:

1. When confirmed, it calls $gameMessage.setNumberInputValue(value).

2. It automatically notifies the engine that the message process is finished via rt.gameMessage.endMessage().

3. It listens for the Input Number event command from the engine interpreter and shows the modal automatically.

Input Behavior

• Keyboard/Gamepad: Navigate the numpad using arrow keys and select with OK.

• Mouse: Click buttons directly.

• Special Keys:

  • ±: Toggles between positive and negative values.

  • ←: Backspace.

  • C: Clears the input.

  • OK: Confirms the value.

  • Cancel: Closes without saving.