Skip to main content

​
React Components

​
ReactorProvider

Context provider that manages Reactor state for React applications. Must wrap all other Reactor components and hooks. 
<ReactorProvider {...props}>
  {children}
</ReactorProvider>

​
Props

PropTypeRequiredDescription
modelNamestringYesThe Reactor model to connect to
insecureApiKeystringYesYour Reactor API key
queueingbooleanNoWhen true, users are queued (FIFO) if no machines are available. When false, users are disconnected immediately if no machines are available (default: false)
autoConnectbooleanNoAutomatically connect on mount (default: false)
childrenReactNodeYesChild components

​
Example

<ReactorProvider
  modelName="longlive"
  insecureApiKey={process.env.REACTOR_API_KEY}
>
  <App />
</ReactorProvider>

​
ReactorView

Displays the video stream from the Reactor model. Automatically manages the video element lifecycle. 
<ReactorView {...props} />

​
Props

PropTypeRequiredDescription
classNamestringNoCSS class name for styling
styleCSSPropertiesNoInline styles

​
Example

<ReactorView 
  className="w-full h-96 rounded-lg"
  style={{ maxWidth: '800px' }}
/>

​
WebcamStream

Captures and automatically publishes webcam video to the Reactor machine. This component handles camera permissions, stream lifecycle, and automatic publishing/unpublishing based on Reactor connection status. 
<WebcamStream {...props} />

​
Props

PropTypeRequiredDescription
classNamestringNoCSS class name for styling
styleCSSPropertiesNoInline styles
videoConstraintsMediaTrackConstraintsNoMediaStream video constraints (default: 1280x720)
showWebcambooleanNoWhether to display the webcam preview (default: true)
videoObjectFit"contain" | "cover" | ...NoCSS object-fit property for video element (default: “contain”)

​
Behavior

  • Auto-start: Automatically requests camera access on mount
  • Auto-publish: Publishes video stream when Reactor status becomes "ready"
  • Auto-unpublish: Stops publishing when Reactor disconnects
  • Error handling: Shows permission denied message if camera access is blocked
  • Cleanup: Properly stops camera and unpublishes on unmount

​
Example

import { WebcamStream } from "@reactor-team/js-sdk";

function VideoInput() {
  return (
    <WebcamStream 
      className="w-full aspect-video rounded-lg"
      videoConstraints={{
        width: { ideal: 1920 },
        height: { ideal: 1080 }
      }}
      videoObjectFit="cover"
    />
  );
}
The WebcamStream component is particularly useful for video-to-video (V2V) models like StreamDiffusionV2. It handles all the complexity of camera management and video publishing automatically.

​
Complete Example

Here’s how to use both components together: 
import { ReactorProvider, ReactorView } from "@reactor-team/js-sdk";

export default function App() {
  return (
    <ReactorProvider
      modelName="matrix-2"
      insecureApiKey={process.env.REACTOR_API_KEY!}
      autoConnect={true}
    >
      <div className="container">
        <h1>My Reactor App</h1>
        <ReactorView className="video-player" />
      </div>
    </ReactorProvider>
  );
}
⌘I