DocsPricing
Dashboard

Create 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:

  1. Next.js
  2. Cloudflare Workers
  3. Node.js
// 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);

Related