# useOptionalPlayer

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

## Import

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

## Usage

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

```tsx
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`.

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

const playback = useOptionalPlayer(selectPlayback);
```

Use `usePlayer` when the component requires a surrounding player.

## API Reference

### Without Selector

`useOptionalPlayer(): UnknownStore | undefined`

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

#### Return Value

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

### With Selector

`useOptionalPlayer<R>(selector): R | undefined`

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

#### Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `selector` (required) | `((state: UnknownState) => R)` | — | Derives a value from the player store state. |

#### Return Value

`R | undefined`

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt