Content Title

Preview
Code

ContentTitle.jsx

"use client";

import { usePlayerSelector } from "@/registry/react/PlayerProvider";

export function ContentTitle() {
  const content = usePlayerSelector((p) => p.content);
  const contentIndex = usePlayerSelector((p) => p.contentIndex);
  return <div>{content?.[contentIndex]?.title}</div>;
}

Installation

npx @beyondwords/cli components add content-title

pnpm dlx @beyondwords/cli components add content-title

yarn dlx @beyondwords/cli components add content-title

bunx --bun @beyondwords/cli components add content-title

Usage

import { PlayerProvider } from '@/registry/react/PlayerProvider';
import { ContentTitle } from '@/registry/react/ContentTitle';

export function Player() {
  return (
    <PlayerProvider args={{ projectId: 9504, contentId: "ba00ef51-03ac-4a85-8b98-e45c957e8ef8", showUserInterface: false }}>
      <ContentTitle />
    </PlayerProvider>
  );
}

The component reads content and contentIndex from the surrounding PlayerProvider via usePlayerSelector and renders the current item’s title (content[contentIndex].title), re-rendering only when those values change.

Reference


Props	None
Player state read	`content`, `contentIndex`
Events emitted	None (display only)
Requires	a `PlayerProvider` ancestor

Getting started

Components

Examples

Installation

Usage

Reference

​Installation

​Usage

​Reference

Installation

Usage

Reference