React

This documents the old v1 API. See React Setup for the current version.

Setup

src/utils/zocket.ts

import { createZocketReact } from "@zocket/react";
import type { AppRouter } from "path-to-your-server-router-type";

export const zocket = createZocketReact<AppRouter>();

Provider

import { createZocketClient } from "@zocket/client";
import { zocket } from "./utils/zocket";

const client = createZocketClient("ws://localhost:3000");

export default function App() {
  return (
    <zocket.ZocketProvider client={client}>
      <Dashboard />
    </zocket.ZocketProvider>
  );
}

Basic Usage

function MyComponent() {
  const client = zocket.useClient();
  const { status } = zocket.useConnectionState();
  return <div>Connection: {status}</div>;
}