zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(react): clarify usePlayer typed vs untyped store access (#1663)

Browse Source
This commit is contained in:
Manuel Calleriza
2026-06-18 14:46:01 -03:00
committed by GitHub
parent 0b1491c30e
commit 67e1bc17c6
2 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/reference/use-player.mdx
+10 -1
View File
@@ -15,7 +15,16 @@ import SelectorDemoReact from "@/components/docs/demos/use-player/react/css/Sele
import selectorReactTsx from "@/components/docs/demos/use-player/react/css/Selector.tsx?raw";
import selectorReactCss from "@/components/docs/demos/use-player/react/css/Selector.css?raw";
`Player.usePlayer` gives you access to the player store from any component within a `Player.Provider`. It has two overloads — without arguments for direct store access, or with a selector for reactive state subscriptions. `Player.usePlayer` is typed to the features you passed to <DocsLink slug="reference/create-player">`createPlayer`</DocsLink>. It's also available as a standalone import (`import { usePlayer } from '@videojs/react'`), but the standalone version returns an untyped store.
`Player.usePlayer` (from <DocsLink slug="reference/create-player">`createPlayer`</DocsLink>) gives you access to the player store from any component within a `Player.Provider`. It's typed to the features you passed to `createPlayer`, and has two overloads — without arguments for direct store access, or with a selector for reactive state subscriptions.
`usePlayer` is also available as a standalone import (`import { usePlayer } from '@videojs/react'`), but the standalone version returns an untyped `UnknownStore`. Pass a premade selector to recover typing:
```tsx
import { usePlayer, selectPlayback } from '@videojs/react';
usePlayer(); // UnknownStore (state: unknown)
usePlayer(selectPlayback); // PlaybackState | undefined
```
## Examples