Skip to main content

Hooks API

These functions provide Hooks for accessing the ambient Player and subscribing to certain events. They are exported from the root of the library.

import {usePlayer, useTime} from "liqvid";

useKeymap()

Access the ambient Keymap.

useKeymap(): Keymap;

useMarkerUpdate()

Subscribe to the markerupdate event of Script. Callback receives the index of the previous marker (the current index can be accessed via Script.markerIndex). The second argument is an array of dependencies used to avoid resubscriptions; you will usually want to pass [].

useMarkerUpdate(callback: (prevIndex: number) => void, deps?: React.DependencyList): void;

usePlayback()

Access the ambient Playback.

usePlayback(): Playback;

usePlayer()

Access the ambient Player.

usePlayer(): Player;

useScript()

Access the ambient Script.

useScript(): Script;

useTime()

Subscribe to the seek and timeupdate event of Playback. Accepts the following arguments:

  • callback: (value: T) => void
    Callback receiving the current time (if transform is not specified) or a value computed from it (if transform is specified). This gets called once initially, and will only be called thereafter when value changes.

  • transform?: (t: number) => T
    A function which receives the current time (in milliseconds) and returns a value, which then gets passed to callback. If this argument is not specified, it defaults to t => t, so that callback will receive the current time.

  • deps?: React.DependencyList
    An array of dependencies used to avoid resubscriptions; you will usually want to pass [].

useTime(callback: (value: number) => void, deps?: React.DependencyList): void;
useTime<T = number>(callback: (value: T) => void, transform?: (t: number) => T, deps?: React.DependencyList): void;

useTimeUpdate()

Legacy version of useTime(). Compared to useTime(), this does not accept a transform parameter, and also does not call callback initially (so callback gets called only when the time updates).

useTimeUpdate(callback: (t: number) => void, deps?: React.DependencyList): void;