Using Chooser and ActorChooser

This tutorial covers building selectable lists with the generic Chooser<T> and the party‑focused ActorChooser wrapper.

What you’ll learn

• Render a vertical list navigated with UP/DOWN and confirmed with OK.

• Highlight the selected row and handle selection/highlight events.

• Build a party selector using ActorChooser with PartyMemberFull/PartyMemberCompact.

Chooser<T> at a glance

File: menus/src/components/Chooser.tsx

Chooser – string list

Props

• items: T[]

• children: (item: T, selected: boolean) => React.ReactNode

• hasFocus: boolean

• onItemSelected?(item: T, index: number)

• onItemHighlighted?(item: T, index: number)

• resetSelection?: boolean

Input

• Uses InputContext internally and listens to UP, DOWN, and OK when hasFocus is true.

Example: simple string menu

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

const ItemsMenu: React.FC<{ hasFocus: boolean }> = ({ hasFocus }) => {
  const items = ['Items', 'Skills', 'Equip', 'Status'];
  const [picked, setPicked] = useState<string | null>(null);

  return (
    <div>
      <Chooser
        items={items}
        hasFocus={hasFocus}
        onItemSelected={(item) => setPicked(item)}
        onItemHighlighted={(item, i) => console.log('highlight', i, item)}
      >
        {(item, selected) => (
          <div className={`px-4 py-2 ${selected ? 'bg-white/20' : ''}`}>{item}</div>
        )}
      </Chooser>
      {picked && <div className="mt-4">You picked: {picked}</div>}
    </div>
  );
};
export default ItemsMenu;

ActorChooser

File: menus/src/components/ActorChooser.tsx

ActorChooser – full cards

Props

• Inherits BaseMenuScreenProps (pageData, isTestMenu, hasFocus)

• onActorSelected(actor: any)

• useFullView?: boolean — toggles between PartyMemberFull and PartyMemberCompact

Behavior

• Reads party members from props.pageData.runtime.gameParty.members().

• Internally uses Chooser and renders either full or compact member cards.

Example: pick a party member

import React from 'react';
import ActorChooser from '../../components/ActorChooser';
import { BaseMenuScreenProps } from '../../components/BaseMenuScreen';

const PartyPicker: React.FC<BaseMenuScreenProps> = (props) => {
  return (
    <ActorChooser
      {...props}
      useFullView={false}
      onActorSelected={(actor) => {
        console.log('selected actor', actor._actorId, actor.name());
      }}
    />
  );
};
export default PartyPicker;

Tips

• Pass hasFocus={true} only when the chooser should accept input (e.g., no modal on top).

• Use resetSelection when swapping data sets to ensure the selection returns to 0.

• ActorChooser rows are wrapped in mobx-react-lite observers, so UI reacts to live stat changes.

See also

• InputContext

• PartyMemberFull vs PartyMemberCompact