Skip to main content

​
React Hooks

​
useReactor()

Accesses selected parts of the Reactor state using a selector function. Uses shallow comparison for optimal performance. 
const value = useReactor<T>(selector: (state: ReactorStore) => T): T
Parameters:
  • selector - Function that selects part of the store state
Returns: The selected value from the store

​
Examples

Get connection status: 
const status = useReactor((state) => state.status);
Get connect function: 
const connect = useReactor((state) => state.connect);
Get multiple values: 
const { status, connect, disconnect } = useReactor((state) => ({
  status: state.status,
  connect: state.connect,
  disconnect: state.disconnect
}));
Get waiting info: 
const waitingInfo = useReactor((state) => state.waitingInfo);
Get last error: 
const lastError = useReactor((state) => state.lastError);
Get video publishing functions: 
const { publishVideoStream, unpublishVideoStream } = useReactor((state) => ({
  publishVideoStream: state.publishVideoStream,
  unpublishVideoStream: state.unpublishVideoStream
}));

​
useReactorMessage()

Subscribes to messages from the Reactor model with proper React lifecycle management. These are events that are emitted by a model, if the model supports them. 
useReactorMessage(handler: (message: any) => void): void
Parameters:
  • handler - Callback function that receives messages

​
Example

function MessageHandler() {
  useReactorMessage((message) => {
    console.log("Received:", message);
    // Handle the message
  });
  
  return <div>Listening for messages...</div>;
}

​
Complete Example

Here’s a component that uses both hooks: 
import { useReactor, useReactorMessage } from "@reactor-team/js-sdk";
import { useState } from "react";

function ReactorController() {
  const status = useReactor((state) => state.status);
  const connect = useReactor((state) => state.connect);
  const disconnect = useReactor((state) => state.disconnect);
  const sendMessage = useReactor((state) => state.sendMessage);
  
  const [messages, setMessages] = useState<any[]>([]);
  
  // Listen for messages from the model
  useReactorMessage((message) => {
    setMessages((prev) => [...prev, message]);
  });
  
  return (
    <div>
      <div>Status: {status}</div>
      
      <button 
        onClick={connect} 
        disabled={status !== "disconnected"}
      >
        Connect
      </button>
      
      <button 
        onClick={disconnect} 
        disabled={status === "disconnected"}
      >
        Disconnect
      </button>
      
      <button 
        onClick={() => sendMessage({ action: "ping" })} 
        disabled={status !== "ready"}
      >
        Send Message
      </button>
      
      <div>
        <h3>Messages:</h3>
        {messages.map((msg, i) => (
          <pre key={i}>{JSON.stringify(msg, null, 2)}</pre>
        ))}
      </div>
    </div>
  );
}
⌘I