createFontReady

Reactive helper that becomes true once font() can be measured

Available since @roku-sdk/runtime 2.19.0

import { createFontReady } from "@roku-sdk/runtime/font";

createFontReady(font: Accessor<object | null | undefined>, key?: Accessor<unknown>): Accessor<boolean>

Description

Reactive helper that becomes true once font() can be measured.

Cancels the underlying whenFontReady wait on cleanup or when the ref changes, so components never manage timers themselves.

A <font> node keeps the same ref when its uri or size changes, but the runtime loads a new face. Pass those values through key so the accessor drops back to false and the wait restarts whenever they change; without it a changed face reads as ready immediately.

Parameters

Return values

Accessor that is true once the current ref, with the current key, is measurable

Example

const [fontRef, setFontRef] = createSignal<TmNodeRef>();
const fontReady = createFontReady(fontRef, () => `${props.uri}@${props.size}`);
createEffect(() => {
    if (fontReady()) {
        // safe to call getFontMeasure()
    }
});