NarraLeaf

Make Choices

Use Menu to pause the story and show choices. The selected choice runs its own action list.

import { Menu, Narrator } from "narraleaf-react";

scene.action([
    Menu.prompt("Where should I go?")
        .choose("Library", [
            Narrator.say("You head to the library."),
            scene.jumpTo(library),
        ])
        .choose("Station", [
            Narrator.say("You walk toward the station."),
            scene.jumpTo(station),
        ]),
]);

Use Menu.choose() when no prompt is needed.

scene.action([
    Menu.choose("Continue", [scene.jumpTo(nextScene)]),
]);

Styled choice text

Prompts and choices accept strings, Words, or arrays of both.

import { b, i, Menu } from "narraleaf-react";

Menu.prompt(i("Choose carefully."))
    .choose(["Take the ", b("left door")], [
        scene.jumpTo(leftDoor),
    ]);

Hide or disable a choice

hideIf() removes the last choice when its condition is true. disableIf() keeps it visible but prevents selection.

const state = story.createPersistent("player", {
    hasKey: false,
    visitedRoof: false,
});

const menu = Menu.prompt("What next?")
    .choose("Open the locked door", [scene.jumpTo(vault)])
        .disableIf(state.isFalse("hasKey"))
    .choose("Go to the roof", [scene.jumpTo(roof)])
        .hideIf(state.isTrue("visitedRoof"));

scene.action([menu]);

enableWhen(condition, prompt, actions) and showWhen(condition, prompt, actions) are the positive forms of the same rules.

On this page

Styled choice textHide or disable a choice