Manage Preferences

Preferences control playback: auto-forward, skip behavior, text speed, and audio volume. Use usePreference() in UI rendered below GameProviders.

import { usePreference } from "narraleaf-react";

export function AutoForwardButton() {
    const [autoForward, setAutoForward] = usePreference("autoForward");

    return (
        <button onClick={() => setAutoForward(!autoForward)}>
            Auto: {autoForward ? "On" : "Off"}
        </button>
    );
}

The setter takes the new value directly. It does not accept React's functional updater form.

Text speed and volume

function PreferencesPanel() {
    const [cps, setCps] = usePreference("cps");
    const [voiceVolume, setVoiceVolume] = usePreference("voiceVolume");

    return (
        <div>
            <label>
                Text speed
                <input
                    type="range"
                    min={1}
                    max={60}
                    value={cps}
                    onChange={(event) => setCps(Number(event.target.value))}
                />
            </label>
            <label>
                Voice volume
                <input
                    type="range"
                    min={0}
                    max={1}
                    step={0.05}
                    value={voiceVolume}
                    onChange={(event) => setVoiceVolume(Number(event.target.value))}
                />
            </label>
        </div>
    );
}

Available keys include autoForward, skip, showDialog, gameSpeed, cps, voiceVolume, voiceFadeDuration, voiceEndMode, bgmVolume, soundVolume, globalVolume, skipDelay, and skipInterval. See GamePreference for types and defaults.

Persist preferences

Preferences are separate from SavedGame. Export and store them explicitly.

import { useEffect } from "react";
import { useGame } from "narraleaf-react";

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

    useEffect(() => {
        const raw = localStorage.getItem("game-preferences");
        if (raw) game.preference.importPreferences(JSON.parse(raw));

        const token = game.preference.onPreferenceChange(() => {
            localStorage.setItem(
                "game-preferences",
                JSON.stringify(game.preference.exportPreferences()),
            );
        });

        return token.cancel;
    }, [game]);

    return null;
}

Text speed and volume

Persist preferences

On this page