Feature Image

Preview
Code

FeatureImage.jsx

"use client";

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

export function FeatureImage() {
  const content = usePlayerSelector((p) => p.content);
  const contentIndex = usePlayerSelector((p) => p.contentIndex);
  const item = content?.[contentIndex];
  if (!item?.imageUrl) return null;
  return <img className="max-w-full object-contain" src={item.imageUrl} alt={item.title ?? ""} />;
}

Installation

npx @beyondwords/cli components add feature-image

pnpm dlx @beyondwords/cli components add feature-image

yarn dlx @beyondwords/cli components add feature-image

bunx --bun @beyondwords/cli components add feature-image

Usage

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

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

Reads content and contentIndex from the surrounding PlayerProvider and renders the current item’s imageUrl (using its title as the alt text). It renders nothing when the item has no image, so it’s safe to drop in unconditionally.

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