useTextCues

useTextCues returns a fresh array containing every cue on a text track. It updates on native cuechange, when a native <track> finishes loading, when the media starts loading a new source, and when cues are written through useCreateTextTrack. Cues added directly with the native TextTrack.addCue() do not fire an event and are picked up at the next refresh.

Import

import { useTextCues } from '@videojs/react';

Usage

Find a track with useActiveTextTrack, then subscribe to its full cue list. Passing null returns an empty array.

import { useActiveTextTrack, useTextCues } from '@videojs/react';

export function ChapterList() {
  const track = useActiveTextTrack('chapters');
  const cues = useTextCues(track);

  return (
    <ol>
      {cues.map((cue) => (
        <li key={`${cue.startTime}-${cue.endTime}`}>
          {cue.text ?? `${cue.startTime}s`}
        </li>
      ))}
    </ol>
  );
}

Use useActiveTextCues when you only need cues at the current playback position.