Menu

Menu component renders the menu container, and Item renders the menu item.

Example

1. Import the components

import { useState } from "react";
import { GameMenu, Item, useGame } from "narraleaf-react";

2. Slot the components

function DefaultMenu({items}: { items: number[] }) {
    return (
        <GameMenu
            className="absolute flex flex-col items-center justify-center min-w-full w-full h-full"
        >
            {items.map((index) => (
                <Item
                    key={index}
                    className="bg-white p-2 mt-2 w-1/2"
                    defaultColor="black"
                />
            ))}
        </GameMenu>
    );
}

3. Configure the game

function App() {
    const game = useGame();

    useEffect(() => {
        game.configure({
            menu: DefaultMenu,
        });
    }, []);

    return /* ... */
}

Components

GameMenu

GameMenu component renders the menu container. Its children are the Item components.

• children?: React.ReactNode - The children of the menu container.
• ...props: React.HTMLAttributes<HTMLDivElement> - The props of the menu container.

Item

Item component renders the menu item. It is a child of the GameMenu component.

Exported prop type: ItemProps.

• className?: string - The class name of the menu item.
• style?: React.CSSProperties - The style of the menu item.
• bindKey?: string - The keyboard binding for this item, see Key_Values for more information. When this key is pressed, the item will be selected and the action will be executed.
• defaultColor?: Color - Fallback text color for the choice text. If omitted, text can inherit from CSS.
• fontSize?: React.CSSProperties["fontSize"]
• fontWeight?: React.CSSProperties["fontWeight"]
• fontWeightBold?: React.CSSProperties["fontWeight"]
• fontFamily?: React.CSSProperties["fontFamily"]

Item renders its label through the same text renderer used by dialog text. Sentence and Word styling on the choice still overrides these component defaults.