Player

Player component is used to play the story.

Note: You have to wrap the Player component with the GameProviders component to provide the game instance.

If you are creating a story using abstract classes, please check the Core documentation.

Example

This is a basic example of how to use the Player component:

"use client";
 
import { GameProviders, Player } from "narraleaf-react";
import { story } from "./my-story";
 
export default function Page() {
    return (
        <GameProviders>
            <Player story={story} onReady={({ liveGame }) => {
                liveGame.newGame();
            }}
                width="100vw"
                height="100vh"
            />
        </GameProviders>
    );
}

Props

story

optional

The story object that you want to play.

width

optional

The width of the player.

height

optional

The height of the player.

className

optional

The class name of the player.

onReady

optional

A callback function that is called when the player is ready. It returns the ScriptCtx object.

onEnd

optional

Called when the player ends.

This callback is called when the story ends.

children

optional

The children of the player.

You can pass the children to the player.

For example, you can use PageRouter API to create your own quick menu.

active

optional, default: true

Whether to show the player

Even the active is false, the pages will be rendered

const [active, setActive] = useState(false);
 
return <Player active={active}/>