Position Utils

⚠️

This page is under construction.

Position utils help you to fix the position of the components in the player and scale them according to the screen size.

Usage

Import the components from the NarraLeaf-React library.

import { Top, Center, Bottom } from "narraleaf-react";

And use them in your components.

<Player ...>
    <Top.Left>
        <You-Quick-Menu />
    </Top.Left>
    <Bottom.Right>
        <...>
    </Bottom.Right>
</Player>

The quick menu will fix to the top left of the player and will scale along with the player.

Below is an example of where these positions are fixed.

Top Left

Top Center

Top Right

Center Left

Center Center

Center Right

Bottom Left

Bottom Center

Bottom Right

Fix the component to the top of the player.

Fix the component to the center of the player.

Fix the component to the bottom of the player.