Page Router

In NarraLeaf-React 0.3.0, we introduced the new way to customize the user interface of the player.
Your UI content is now abstracted into pages, and you can navigate between them using the Page Router API.

Elements in a page will be scaled to fit the player's size.

Example

import { Page, Player, useRouter } from "narraleaf-react";

function GameApp() {
    return (
        <Player>
            {/* Your pages */}
            <Page id="about" className="...">
                <span>about</span>
            </Page>
 
            <Page id="contact" className="...">
                <span>contact</span>
            </Page>
        </Player>
    );
}
 
function Button() {
    // somewhere in your app
    // get the router instance
    const router = useRouter();
 
    return (
        <button onClick={() => router.push("about")}>
            Go to about
        </button>
    );
}

Page Router API

useRouter

In Page Router API, a router instance is used to navigate between pages.
You can get the router instance by using the useRouter hook.

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

const router = useRouter();
 
// you can navigate to a page by using the `router` instance
useEffect(() => {
    router.push("about");
    router.back();
    router.forward();
    router.cleanHistory();
}, []);
 
// and access the current page id
console.log(router.getCurrentId());

For more information, please check Router and useRouter.

Page

Page is used to define the content of a page.

import { Page } from "narraleaf-react";

<Page id="about" className="...">
    <span>about</span>
    <p>...</p>
</Page>

For more information, please check Page.

useDialog Router