> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reactor.inc/llms.txt
> Use this file to discover all available pages before exploring further.

# React Components

> React components for the Reactor JavaScript SDK

## `<ReactorProvider>`

Context provider that manages the Reactor connection for your React tree. Must wrap all other Reactor components and hooks.

```tsx Example theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
<ReactorProvider modelName="your-model-name" jwtToken={token}>
  {children}
</ReactorProvider>
```

<ParamField path="modelName" type="string" required>
  The name of the model to connect to.
</ParamField>

<ParamField path="jwtToken" type="string">
  Token for authentication. See [Authentication](/authentication).
</ParamField>

<ParamField path="apiUrl" type="string" default="https://api.reactor.inc">
  The API URL.
</ParamField>

<ParamField path="local" type="boolean" default="false">
  If `true`, connects to a local runtime at `http://localhost:8080`. Ignores `apiUrl`.
</ParamField>

<ParamField path="connectOptions" type="ReactorConnectOptions">
  Connection behavior options.
</ParamField>

<ParamField path="connectOptions.autoConnect" type="boolean" default="false">
  Automatically connect on mount.
</ParamField>

<ParamField path="connectOptions.maxAttempts" type="number" default="6">
  Maximum SDP polling attempts before giving up.
</ParamField>

<ParamField path="connectOptions.autoResumeTracks" type="boolean" default="true">
  When `true`, the model's output tracks start streaming as soon as the connection is established. Set to `false` to leave them paused on connect. See [`connect()`](/sdk-reference/reactor-class#connect).
</ParamField>

<ParamField path="connectOptions.sessionId" type="string">
  Adopt an existing session instead of creating one. See
  [Sessions](/concepts/sessions#multiple-connections-per-session).
</ParamField>

<ParamField path="connectOptions.connectionId" type="number">
  Join the session using a pre-registered WebRTC connection id. See
  [`connect()`](/sdk-reference/reactor-class#connect).
</ParamField>

<Note>
  The provider's `connectOptions` act as defaults. Any options you pass to a later `connect()` call
  override the matching defaults for that connection.
</Note>

***

## `<ReactorView>`

Displays the video stream from the model. Automatically binds to the video output and manages the video element lifecycle.

```tsx Example theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
<ReactorView className="w-full aspect-video" videoObjectFit="cover" />
```

<ParamField path="track" type="string" default="main_video">
  The name of the video track to display. Most models expose a single video output called `main_video`, which is used by default. Only set this if the model exposes multiple video tracks.
</ParamField>

<ParamField path="audioTrack" type="string">
  The name of an audio track to play alongside the video.
</ParamField>

<ParamField path="muted" type="boolean" default="true">
  Whether the video element is muted.
</ParamField>

<ParamField path="className" type="string">
  CSS class name.
</ParamField>

<ParamField path="style" type="CSSProperties">
  Inline styles.
</ParamField>

<ParamField path="width" type="number">
  Width of the video element in pixels.
</ParamField>

<ParamField path="height" type="number">
  Height of the video element in pixels.
</ParamField>

<ParamField path="videoObjectFit" type="&#x22;contain&#x22; | &#x22;cover&#x22; | &#x22;fill&#x22; | &#x22;none&#x22; | &#x22;scale-down&#x22;" default="contain">
  CSS `object-fit` value for the video element.
</ParamField>

***

## `<WebcamStream>`

Captures webcam video and automatically publishes it to the model when the connection is ready. Handles camera permissions, lifecycle, and cleanup.

```tsx Example theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
<ReactorProvider modelName="your-model-name" jwtToken={token}>
  <WebcamStream track="webcam" />
</ReactorProvider>
```

<ParamField path="track" type="string" required>
  The name of the send track to publish to. Must match a `sendonly` track name declared by the model.
</ParamField>

<ParamField path="className" type="string">
  CSS class name.
</ParamField>

<ParamField path="style" type="CSSProperties">
  Inline styles.
</ParamField>

<ParamField path="videoConstraints" type="MediaTrackConstraints" default="{ width: 1280, height: 720 }">
  Constraints passed to `getUserMedia()`.
</ParamField>

<ParamField path="showWebcam" type="boolean" default="true">
  Whether to render the webcam preview.
</ParamField>

<ParamField path="videoObjectFit" type="&#x22;contain&#x22; | &#x22;cover&#x22; | &#x22;fill&#x22; | &#x22;none&#x22; | &#x22;scale-down&#x22;" default="contain">
  CSS `object-fit` value for the webcam preview.
</ParamField>

<ParamField path="audio" type="boolean" default="false">
  If `true`, also captures and publishes microphone audio alongside the webcam video.
</ParamField>

<ParamField path="audioTrack" type="string" default="mic">
  The name of the audio track to publish to. Must match a `sendonly` audio track name declared by the model.
</ParamField>

The component automatically publishes the webcam to the named track when status becomes `"ready"`, and unpublishes when the connection closes or the component unmounts.

***

## `<ReactorController>`

Auto-generates UI controls from the model's command schema. Intended for prototyping and debugging. For production, build custom controls.

```tsx Example theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
<ReactorController className="w-full" />
```

<ParamField path="className" type="string">
  CSS class name.
</ParamField>

<ParamField path="style" type="CSSProperties">
  Inline styles.
</ParamField>

When the connection reaches `"ready"`, the component requests the model's capabilities and renders a form for each declared command. Supports `number`, `integer`, `string`, `boolean`, and `enum` parameter types. Sliders execute immediately; other inputs require clicking "Execute".

***

## `<ClipPlayer>`

Plays a [`Clip`](/sdk-reference/types#clip) inline. Renders a native `<video controls>` element and handles fetching and attaching the clip on Safari, Chrome, Firefox, and Edge.

```tsx Example theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
<ClipPlayer clip={clip} getJwt={() => jwt} />
```

`ClipPlayer` works without a `ReactorProvider` in the tree, so it keeps rendering a clip after the session has ended.

<ParamField path="clip" type="Clip" required>
  The clip to play. Changing this prop re-attaches the player.
</ParamField>

<ParamField path="getJwt" type="() => string | Promise<string>">
  Resolver for the auth token used to fetch the clip. Required when running against `https://api.reactor.inc`. Called on each fetch so token refreshes are picked up. See [Authentication](/authentication).
</ParamField>

<ParamField path="slackMs" type="number" default="15000">
  Grace period in milliseconds before the SDK gives up waiting for the clip to be finalised. Bump for long recordings where the final segment can take longer to finalise.
</ParamField>

<ParamField path="autoPlay" type="boolean" default="true">
  Whether playback starts as soon as the clip is attached.
</ParamField>

<ParamField path="muted" type="boolean" default="true">
  Whether the video starts muted. Browsers block autoplay-with-audio without a user gesture.
</ParamField>

<ParamField path="className" type="string">
  CSS class name forwarded to the wrapping element.
</ParamField>

<ParamField path="style" type="CSSProperties">
  Inline styles forwarded to the wrapping element.
</ParamField>

<Note>
  Safari can play clips natively. Other browsers need `hls.js` installed alongside the SDK as an optional peer dependency:

  ```bash Install hls.js theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
  pnpm add hls.js
  ```
</Note>

***

## `<ClipDownloadButton>`

Drop-in button that downloads a [`Clip`](/sdk-reference/types#clip) as an MP4. The default label reflects download progress; override it with `children` to show your own.

```tsx Example theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
<ClipDownloadButton clip={clip} getJwt={() => jwt} />
```

<ParamField path="clip" type="Clip" required>
  The clip to download.
</ParamField>

<ParamField path="getJwt" type="() => string | Promise<string>">
  Resolver for the auth token used to fetch the clip. Required against `https://api.reactor.inc`. See [Authentication](/authentication).
</ParamField>

<ParamField path="filename" type="string" default="&#x22;reactor-clip.mp4&#x22;">
  Filename used by the browser save dialog.
</ParamField>

<ParamField path="children" type="ReactNode | ((state: ClipDownloadState) => ReactNode)">
  Static label, or a render function that receives the current [`ClipDownloadState`](/sdk-reference/types#clipdownloadstate). Omit for the default progress-aware label.
</ParamField>

<ParamField path="className" type="string">
  CSS class name forwarded to the underlying `<button>`.
</ParamField>

<ParamField path="style" type="CSSProperties">
  Inline styles forwarded to the underlying `<button>`.
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  Disables the button. Always disabled while a download is in flight, regardless of this prop.
</ParamField>

For custom download UI, use [`useClipDownload`](/sdk-reference/react-hooks#useclipdownload).