# useTextTracks

Hook that returns the text tracks a filter or track definition matches, from the media or the app

## Import

```tsx
import { useTextTracks } from '@videojs/react';
```

`useTextTracks` returns the tracks in `textTrackList` that a filter or [track definition](https://videojs.org/docs/framework/react/reference/api/define-text-track) matches, and re-renders when they change. Tracks from the media and from the app are listed alike; each track’s `source` says which. It returns an empty list when the player has no [text track feature](https://videojs.org/docs/framework/react/reference/api/feature-text-tracks).

A filter picks tracks by `kind`, `label`, or `language`, or with a function. Each given field must match, and a list of kinds matches any kind in it. Without a filter, it returns every track. Keep a function filter’s identity across renders.

**ChapterTrackPicker.tsx**

```tsx
import { useTextTracks } from '@videojs/react';

function ChapterTrackPicker() {
  const tracks = useTextTracks({ kind: 'chapters' });
  if (tracks.length < 2) return null;

  return (
    <select aria-label="Chapters">
      {tracks.map((track) => (
        <option key={track.id} value={track.id}>
          {track.label || track.language}
        </option>
      ))}
    </select>
  );
}
```

## API Reference

`useTextTracks(filter?): MediaTextTrack[]`

### Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `filter` | `{ kind?: TextTrackKind \| readonly TextTrackKind[]; label?: string; language?: string } \| ((track: MediaTextTrack) => boolean) \| { kind: 'subtitles' \| 'captions' \| 'descriptions' \| 'chapters' \| 'metadata'; label?: string; language?: string; schema?: StandardSchemaV1 }` | `{}` | Picks tracks by kind, label, or language, or with a function. |

### Return Value

`MediaTextTrack[]`

---

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