usePreference

You can access and manage the preferences using this hook.

Note: this hook can only be used in a component that is a descendant of GameProvider.

function usePreference<K extends StringKeyOf<GamePreference>>(
    key: K
): [GamePreference[K], (value: GamePreference[K]) => void];

For GamePreference, see GamePreference.

Usage

This hook is similar to useState (opens in a new tab) hook. It returns a tuple containing the current value and a function to update the value.

import {usePreference} from "narraleaf-react";

function myComponent() {
    const [autoForward, setAutoForward] = usePreference("autoForward");
 
    function triggerAutoForward() {
        setAutoForward(current => !current);
    }
 
    return (
        <div>
            Auto Forward: {autoForward ? "Enabled" : "Disabled"}
            
            <button onClick={triggerAutoForward}>
                Toggle Auto Forward
            </button>
        </div>
    );
}

useGame Customization