@shadowing/react

React integration for the Shadowing embed API. The host backend obtains a short-lived embed token, then passes only that token to the browser component.

Install the package and its SDK peer independently of the Shadowing repository:

npm install @shadowing/react @shadowing/sdk

import { ShadowingPractice } from "@shadowing/react";

<ShadowingPractice
  baseUrl="https://shadowing.example"
  embedToken={embedToken}
  contentId="lesson-id"
  onReady={(session) => console.log("ready", session.id)}
  onAttemptComplete={(attempt) => console.log(attempt.id)}
  onSessionComplete={(session) => console.log("completed", session.id)}
  onError={(error) => console.error(error.code, error.status)}
/>;

The package uses @shadowing/sdk for all API operations and exposes lifecycle callbacks for ready, attempt completion, session completion, and errors. It loads the token-bound practice entry, displays transcript segments and the YouTube media source, records a local MediaRecorder clip, submits the clip as multipart audio, and renders recognized text plus word-level feedback. The recording remains available when assessment fails so the learner can retry without losing the current segment.

The host must obtain embedToken on its server and pass only the short-lived token to this component. baseUrl, embedToken, and contentId are required; theme={{accentColor: "#0f766e"}} is the supported customization surface. Microphone permission and browser MediaRecorder support are required for recording. The component reports recoverable failures through onError and keeps permanent integration credentials outside the package and browser.