ReferencePlayer

useOptionalPlayer

Hook to access or select Player state when a Player is available

Import

import { useOptionalPlayer } from "@videojs/react";

Without a selector, the hook returns the player store or undefined outside Player.

const store = useOptionalPlayer();

With a selector, it subscribes while a player is available and returns the selected value. The selector is not called outside Player.

import { selectPlayback, useOptionalPlayer } from "@videojs/react";

const playback = useOptionalPlayer(selectPlayback);

Use usePlayer when the component requires a surrounding player.

useOptionalPlayer(): UnknownStore | undefined

Returns the player store when available, or undefined outside a Player.

Property	Type	Details
`$state`	`object`
Type `{ current: Readonly<UnknownState>; subscribe(callback: (() => void), options?: SubscribeOptions): (() => void) }`
`target`	`unknown \| null`
`destroyed`	`boolean`
`state`	`Record<string, unknown>`
`attach`	`function`
Type `((target: unknown) => (() => void))`
`destroy`	`function`
Type `(() => void)`
`subscribe`	`function`
Type `((callback: StateChange, options?: SubscribeOptions) => (() => void))`

useOptionalPlayer<R>(selector): R | undefined

Selects a player value when available, or returns undefined outside a Player.

Parameter	Type	Default	Details
`selector*`	`function`	—
Description Derives a value from the player store state. Type `((state: UnknownState) => R)`

R | undefined