Skip to main content

​
<ReactorProvider>

Context provider that manages the Reactor connection for your React tree. Must wrap all other Reactor components and hooks.
Example
​
string
required
The name of the model to connect to.
​
string
Token for authentication. See Authentication.
​
string
default:"https://api.reactor.inc"
The API URL.
​
boolean
default:"false"
If true, connects to a local runtime at http://localhost:8080. Ignores apiUrl.
​
ReactorConnectOptions
Connection behavior options.
​
boolean
default:"false"
Automatically connect on mount.
​
number
default:"6"
Maximum SDP polling attempts before giving up.
​
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().
​
string
Adopt an existing session instead of creating one. See Sessions.
​
number
Join the session using a pre-registered WebRTC connection id. See connect().
The provider’s connectOptions act as defaults. Any options you pass to a later connect() call override the matching defaults for that connection.

​
<ReactorView>

Displays the video stream from the model. Automatically binds to the video output and manages the video element lifecycle.
Example
​
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.
​
string
The name of an audio track to play alongside the video.
​
boolean
default:"true"
Whether the video element is muted.
​
string
CSS class name.
​
CSSProperties
Inline styles.
​
number
Width of the video element in pixels.
​
number
Height of the video element in pixels.
​
"contain" | "cover" | "fill" | "none" | "scale-down"
default:"contain"
CSS object-fit value for the video element.

​
<WebcamStream>

Captures webcam video and automatically publishes it to the model when the connection is ready. Handles camera permissions, lifecycle, and cleanup.
Example
​
string
required
The name of the send track to publish to. Must match a sendonly track name declared by the model.
​
string
CSS class name.
​
CSSProperties
Inline styles.
​
MediaTrackConstraints
default:"{ width: 1280, height: 720 }"
Constraints passed to getUserMedia().
​
boolean
default:"true"
Whether to render the webcam preview.
​
"contain" | "cover" | "fill" | "none" | "scale-down"
default:"contain"
CSS object-fit value for the webcam preview.
​
boolean
default:"false"
If true, also captures and publishes microphone audio alongside the webcam video.
​
string
default:"mic"
The name of the audio track to publish to. Must match a sendonly audio track name declared by the model.
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.
Example
​
string
CSS class name.
​
CSSProperties
Inline styles.
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 inline. Renders a native <video controls> element and handles fetching and attaching the clip on Safari, Chrome, Firefox, and Edge.
Example
ClipPlayer works without a ReactorProvider in the tree, so it keeps rendering a clip after the session has ended.
​
Clip
required
The clip to play. Changing this prop re-attaches the player.
​
() => 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.
​
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.
​
boolean
default:"true"
Whether playback starts as soon as the clip is attached.
​
boolean
default:"true"
Whether the video starts muted. Browsers block autoplay-with-audio without a user gesture.
​
string
CSS class name forwarded to the wrapping element.
​
CSSProperties
Inline styles forwarded to the wrapping element.
Safari can play clips natively. Other browsers need hls.js installed alongside the SDK as an optional peer dependency:
Install hls.js

​
<ClipDownloadButton>

Drop-in button that downloads a Clip as an MP4. The default label reflects download progress; override it with children to show your own.
Example
​
Clip
required
The clip to download.
​
() => string | Promise<string>
Resolver for the auth token used to fetch the clip. Required against https://api.reactor.inc. See Authentication.
​
string
default:"\"reactor-clip.mp4\""
Filename used by the browser save dialog.
​
ReactNode | ((state: ClipDownloadState) => ReactNode)
Static label, or a render function that receives the current ClipDownloadState. Omit for the default progress-aware label.
​
string
CSS class name forwarded to the underlying <button>.
​
CSSProperties
Inline styles forwarded to the underlying <button>.
​
boolean
default:"false"
Disables the button. Always disabled while a download is in flight, regardless of this prop.
For custom download UI, use useClipDownload.