Create React Bundle

pluv.io provides react bindings via @pluv/react to use @pluv/client in a more react-friendly way.

Create a PluvIO instance

First, create a PluvIO instance from the @pluv/io package in your backend codebase.

You can view examples of setting up the PluvIO instance via your platform's respective quickstart guides:

// backend/io.ts
import { yjs } from "@pluv/crdt-yjs";
import { createIO } from "@pluv/io";
import { platformPluv } from "@pluv/platform-pluv";

export const io = createIO(
  platformPluv({ /* ... */})
);

// Export the ioServer, so that this can be type-imported on the frontend
export const ioServer = io.server();

Create a Pluv React bundle

Then, import your PluvIO type to the frontend, and create your type-safe react bundle using @pluv/react.

// frontend/io.ts
import { yjs } from "@pluv/crdt-yjs";
import { createClient, infer } from "@pluv/client";
import { createBundle } from "@pluv/react";
import { z } from "zod";
// import your ioServer type from your backend codebase
import type { ioServer } from "./backend/io";

const types = infer((i) => ({ io: i<typeof ioServer> }));
const client = clientClient({ /* ... */});

export const {
  // components
  MockedRoomProvider,
  PluvProvider,
  PluvRoomProvider,

  // utils
  event,

  // hooks
  useBroadcast,
  useCanRedo,
  useCanUndo,
  useClient,
  useConnection,
  useDoc,
  useEvent,
  useMyPresence,
  useMyself,
  useOther,
  useOthers,
  useRedo,
  useRoom,
  useStorage,
  useTransact,
  useUndo,
} = createBundle(client);

Create React Bundle

Create a PluvIO instance

Create a Pluv React bundle

Related