Show Dialog
Create a Character, then place its say() actions in a scene.
import { Character, Scene } from "narraleaf-react";
const alice = new Character("Alice", { color: "#f59e0b" });
const opening = new Scene("opening").action([
alice.say("Hello."),
alice.say("Did you sleep well?"),
]);Use the exported Narrator, or create a character with a null name, for narration.
import { Narrator } from "narraleaf-react";
opening.action([
Narrator.say("Rain taps against the window."),
]);The example above is illustrative. Keep all actions in one opening.action([...]) call in real code.
Styled words
Template strings accept Word values.
import { Word } from "narraleaf-react";
alice.say`Take the ${Word.bold("red key")}, not the ${Word.color("blue one", "#60a5fa")}.`;The short helpers b, i, and c create bold, italic, and colored words.
import { b, c, i } from "narraleaf-react";
alice.say(["This is ", b("important"), "."]);
alice.say([i("Quietly"), ", she closes the door."]);
alice.say(["Warning: ", c("low health", "#ef4444")]);Dynamic text
A Word can evaluate game data when the line is displayed. Use Persistent.get() for stored values, or provide a function for custom logic.
import { Word } from "narraleaf-react";
const currentTime = new Word(
() => new Date().toLocaleTimeString(),
{ color: "#f87171" },
);
alice.say`It is ${currentTime}.`;Per-line settings
Pass a second argument to control a single line. pause: false continues without waiting for a click; metadata is available to custom dialog UI through useDialog().
alice.say("This line continues immediately.", { pause: false });
alice.say("Quest started.", {
metadata: { event: "quest-start", questId: "find-key" },
});See Sentence for pauses, voice, metadata, color, and font options.