@realtime-react/client

Realtime React JS client library: reactive Proxy state + automatic realtime sync over WebSockets, with room-based updates.

Install

npm install @realtime-react/client

Usage

useRealtime(roomKey)

Create/get a reactive object for a room. Mutate it directly — no setState, no WebSocket code, no manual sync.

import { useRealtime } from "@realtime-react/client";

export function Profile() {
  const user = useRealtime("user");

  return (
    <div>
      <div>{user.name ?? "Anonymous"}</div>
      <button onClick={() => (user.name = "Bala")}>Set name</button>
    </div>
  );
}

useRealtimeEvent(eventName, callback, roomKey?)

Subscribe to room-scoped events (useful for side effects).

import { emitRealtimeEvent, useRealtimeEvent } from "@realtime-react/client";

useRealtimeEvent("call.connected", (payload) => {
  console.log("connected:", payload);
}, "call_123");

emitRealtimeEvent("call.connected", { at: Date.now() }, "call_123");

Features

• Proxy-based state engine (deep mutations)
• Automatic UI updates (React subscription)
• Automatic WebSocket sync (no manual network code)
• Room-based broadcasts (useRealtime("call_123"))
• Conflict handling: last-write-wins (ts + clientId)
• Minimal patches: sends only changed path/value
• Auto reconnect + re-join rooms on reconnect

Configure (optional)

import { configureRealtimeReact } from "@realtime-react/client";

configureRealtimeReact({ url: "ws://localhost:7071", logLevel: "warn" });

Server

Use @realtime-react/server (or implement the same protocol).