React Hooks

`useReactor()`

Selects state from the Reactor store. Uses shallow comparison to avoid unnecessary re-renders.

Signature

useReactor<T>(selector: (state: ReactorStore) => T): T

(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

Property	Type	Description
`status`	`ReactorStatus`	Current connection status
`lastError`	`ReactorError \| undefined`	Most recent error
`tracks`	`Record<string, MediaStreamTrack>`	Received tracks by name
`sessionId`	`string \| undefined`	Current 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).

Per-track pauseTrack / resumeTrack subscribe to and unsubscribe from an output track. They are base Reactor methods, not store actions. Reach the instance from a hook with useReactor((s) => s.internal.reactor) when you need them in React.

`useReactorMessage()`

Subscribes to application-level messages from the model. Handles React lifecycle automatically.

Signature

useReactorMessage(handler: (message: any) => void): void

(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

required

The clip to download. See Clip.

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.

() => string | Promise<string>

Resolver for the auth token. Required against https://api.reactor.inc. See Authentication.

The hook returns:

Property	Type	Description
`state`	`ClipDownloadState`	Current 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`	`() => void`	Resets `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.

Get Started

Concepts

SDK Reference

Resources

`useReactor()`

Store properties

`useReactorMessage()`

`useStats()`

`useClipDownload()`

​useReactor()

​Store properties

​useReactorMessage()

​useStats()

​useClipDownload()

`useReactor()`

Store properties

`useReactorMessage()`

`useStats()`

`useClipDownload()`