Skip to main content

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.

​
useReactor()

Selects state from the Reactor store. Uses shallow comparison to avoid unnecessary re-renders.
Signature
useReactor<T>(selector: (state: ReactorStore) => T): T
​
selector
(state: ReactorStore) => T
required
A function that picks values from the store.
Example
// Single value
const status = useReactor((s) => s.status);

// Multiple values
const { status, sendCommand } = useReactor((s) => ({
  status: s.status,
  sendCommand: s.sendCommand,
}));

​
Store properties

PropertyTypeDescription
statusReactorStatusCurrent connection status
lastErrorReactorError | undefinedMost recent error
tracksRecord<string, MediaStreamTrack>Received tracks by name
sessionIdstring | undefinedCurrent session ID
connect(jwtToken?: string, options?: ConnectOptions) => Promise<void>Connect to the model
disconnect(recoverable?: boolean) => Promise<void>Disconnect
reconnect(options?: ConnectOptions) => Promise<void>Reconnect to existing session
sendCommand(command: string, data: object) => Promise<void>Send a command
uploadFile(file: File | Blob, options?: { name?: string }) => Promise<FileRef>Upload a file
publish(name: string, track: MediaStreamTrack) => Promise<void>Publish a track
unpublish(name: string) => Promise<void>Stop publishing a track
The store exposes publish / unpublish; the base Reactor class names the same operations publishTrack / unpublishTrack. Use whichever matches your entry point (hook store vs. class instance).

​
useReactorMessage()

Subscribes to application-level messages from the model. Handles React lifecycle automatically.
Signature
useReactorMessage(handler: (message: any) => void): void
​
handler
(message: any) => void
required
Called each time the model sends a message. The shape of message depends on the model.
Example
useReactorMessage((msg) => {
  if (msg.type === "state") {
    setFrame(msg.data.current_frame);
  }
});
This hook only receives application-scoped messages. Internal platform messages are handled by the SDK.

​
useStats()

Returns live WebRTC connection statistics, updated every 2 seconds while connected.
Signature
useStats(): ConnectionStats | undefined
Example
const stats = useStats();
if (stats) {
  console.log(`RTT: ${stats.rtt}ms, FPS: ${stats.framesPerSecond}`);
}
See ConnectionStats for all available fields.

​
useClipDownload()

Headless primitive for downloading a Clip. Wraps reactor.downloadClipAsFile() and exposes the state of the in-flight download so you can render your own button, progress bar, or menu item.
Signature
useClipDownload(clip: Clip, options?: UseClipDownloadOptions): UseClipDownloadResult
​
clip
Clip
required
The clip to download. See Clip.
​
options.filename
string | null
default:"\"reactor-clip.mp4\""
Filename used by the browser save dialog. Pass null to skip the save dialog and just resolve with the Blob.
​
options.getJwt
() => string | Promise<string>
Resolver for the auth token. Required against https://api.reactor.inc. See Authentication.
The hook returns:
PropertyTypeDescription
stateClipDownloadStateCurrent state of the download.
download() => Promise<Blob | undefined>Starts the download. A no-op while one is in flight. Errors are surfaced via state, not thrown.
reset() => voidResets state to idle. Does not cancel an in-flight download.
Example
import { useClipDownload } from "@reactor-team/js-sdk";

function Save({ clip, jwt }: { clip: Clip; jwt: string }) {
  const { state, download } = useClipDownload(clip, { getJwt: () => jwt });

  if (state.kind === "downloading") {
    return <progress value={state.fetched} max={state.total || 1} />;
  }
  if (state.kind === "error") {
    return <button onClick={download}>Retry</button>;
  }
  return <button onClick={download}>Save</button>;
}
For the default button UI, use ClipDownloadButton.