Loading...
Loading...
RivetKit React client guidance. Use for React apps that connect to Rivet Actors with @rivetkit/react, create hooks with createRivetKit, or manage realtime state with useActor.
npx skill4agent add rivet-dev/skills rivetkit-client-react@rivetkit/reactnpm install @rivetkit/react@2.0.42createRivetKit()useActor()import { createRivetKit } from "@rivetkit/react";
import type { registry } from "./registry";
const { useActor } = createRivetKit<typeof registry>({
endpoint: "https://my-namespace:pk_...@api.rivet.dev",
});
function Counter() {
const { connection, connStatus } = useActor({ name: "counter", key: ["my-counter"] });
if (connStatus !== "connected" || !connection) return <div>Connecting...</div>;
return <button onClick={() => connection.increment(1)}>+</button>;
}import { actor, setup } from "rivetkit";
export const counter = actor({
state: { count: 0 },
actions: {
increment: (c, x: number) => {
c.state.count += x;
c.broadcast("newCount", c.state.count);
return c.state.count;
},
},
});
export const registry = setup({
use: { counter },
});import { createRivetKit } from "@rivetkit/react";
const { useActor } = createRivetKit();
function Counter() {
const counter = useActor({ name: "counter", key: ["my-counter"] });
const increment = async () => {
await counter.connection?.increment(1);
};
return <button onClick={increment}>+</button>;
}// Stateless: use createClient for one-off calls (SSR or utilities)
import { createClient } from "rivetkit/client";
const client = createClient();
await client.counter.getOrCreate(["my-counter"]).increment(1);import { createRivetKit } from "@rivetkit/react";
import { createClient } from "rivetkit/client";
const { useActor } = createRivetKit();
function ChatRoom() {
const room = useActor({ name: "chatRoom", key: ["room-42"] });
return <div>{room.connStatus}</div>;
}
// For get/getOrCreate/create/getForId, use createClient
const client = createClient();
const handle = client.chatRoom.getOrCreate(["room-42"]);
const existing = client.chatRoom.get(["room-42"]);
const created = await client.game.create(["game-1"], { input: { mode: "ranked" } });
const byId = client.chatRoom.getForId("actor-id");
const resolvedId = await handle.resolve();import { createRivetKit } from "@rivetkit/react";
const { useActor } = createRivetKit();
function Chat() {
const chat = useActor({
name: "chatRoom",
key: ["general"],
params: { authToken: "jwt-token-here" },
});
return <div>{chat.connStatus}</div>;
}import { createRivetKit } from "@rivetkit/react";
const { useActor } = createRivetKit();
function Chat() {
const chat = useActor({ name: "chatRoom", key: ["general"] });
chat.useEvent("message", (msg) => {
console.log("message:", msg);
});
return null;
}import { createRivetKit } from "@rivetkit/react";
const { useActor } = createRivetKit();
function CounterStatus() {
const actor = useActor({ name: "counter", key: ["my-counter"] });
if (actor.connStatus === "connected") {
console.log("connected");
}
if (actor.error) {
console.error(actor.error);
}
return null;
}import { createClient } from "rivetkit/client";
const client = createClient();
const handle = client.chatRoom.getOrCreate(["general"]);
const response = await handle.fetch("history");
const history = await response.json();
const ws = await handle.websocket("stream");
ws.addEventListener("message", (event) => {
console.log("message:", event.data);
});
ws.send("hello");import { ActorError } from "rivetkit/client";
import { createRivetKit } from "@rivetkit/react";
const { useActor } = createRivetKit();
function Profile() {
const actor = useActor({ name: "user", key: ["user-123"] });
const updateUsername = async () => {
try {
await actor.connection?.updateUsername("ab");
} catch (error) {
if (error instanceof ActorError) {
console.log(error.code, error.metadata);
}
}
};
return <button onClick={updateUsername}>Update</button>;
}import { createRivetKit } from "@rivetkit/react";
import type { registry } from "./registry";
const { useActor } = createRivetKit<typeof registry>();
function ChatRoom() {
const room = useActor({ name: "chatRoom", key: ["org-acme", "general"] });
return <div>{room.connStatus}</div>;
}import { actor, setup } from "rivetkit";
export const chatRoom = actor({
state: { messages: [] as string[] },
actions: {
getRoomInfo: (c) => ({ org: c.key[0], room: c.key[1] }),
},
});
export const registry = setup({
use: { chatRoom },
});"org:${userId}"userIdcreateRivetKit()createClient()RIVET_ENDPOINTRIVET_NAMESPACERIVET_TOKENRIVET_RUNNERwindow.location.origin + "/api/rivet"http://127.0.0.1:6420https://namespace:token@api.rivet.devRIVET_NAMESPACERIVET_TOKEN/api/rivetcreateRivetKituseActornpx skills add rivet-dev/skillsrivetkit