Headless Hooks

Interface

Use the headless hooks when you want to keep the YouTube player lifecycle and playback logic from the package, but render the UI entirely in your own design system.

useJukebox

`useJukebox` wraps a single queue and derives player-facing state such as the current track, next track, and expanded panel state.

import { useJukebox } from "react-youtube-jukebox"; function CustomJukebox({ tracks }: { tracks: JukeboxTrack[] }) {  const { player, currentTrack, expanded, toggleExpanded } = useJukebox({    tracks,    autoplay: false,  });   return (    <section>      <button onClick={toggleExpanded}>        {expanded ? "Collapse" : "Expand"}      </button>      <button onClick={player.togglePlay}>        {player.isPlaying ? "Pause" : "Play"}      </button>      <div>{currentTrack?.title ?? "No track selected"}</div>      <div ref={player.playerMountRef} style={{ aspectRatio: "16 / 9" }} />    </section>  );}

usePlayList

`usePlayList` adds grouped playlist state on top of the player engine, including active tab selection, size state, and track selection behavior.

import { usePlayList } from "react-youtube-jukebox"; function CustomPlayList({ playlist }: { playlist: PlayListItem[] }) {  const { player, activeTracks, currentTrack, setActiveTabIndex, selectTrack } =    usePlayList({      playlist,      autoplay: false,    });   return (    <section>      <button onClick={() => setActiveTabIndex(0)}>First playlist</button>      <ul>        {activeTracks.map((track, index) => (          <li key={track.videoId}>            <button onClick={() => selectTrack(index)}>{track.title}</button>          </li>        ))}      </ul>      <button onClick={player.togglePlay}>        {player.isPlaying ? "Pause" : "Play"}      </button>      <div>{currentTrack?.title ?? "No track selected"}</div>      <div ref={player.playerMountRef} style={{ aspectRatio: "16 / 9" }} />    </section>  );}