Create Bundle

pluv.io ships @pluv/react to leverage @pluv/client in a type-safe and React.js way.

Create a PluvIO instance

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

// backend/io.ts

import { yjs } from "@pluv/crdt-yjs";
import { createIO } from "@pluv/io";
import { platformNode } from "@pluv/platform-node";

export const io = createIO({
    /**
     * @optional
     * @description This is required if you intend to use storage. Specify crdt to use for storage
     */
    crdt: yjs,
    platform: platformNode(),
});

const server = io.server();

// Export the ioServer type, so that this can be type-imported on the frontend
export type AppPluvIO = typeof ioServer;

Create a Pluv React bundle

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

// frontend/io.ts

import { yjs } from "@pluv/crdt-yjs";
import { createBundle, createClient } from "@pluv/react";
import { z } from "zod";
// import your PluvIO instance from your backend codebase
import { type AppPluvIO } from "backend/io";

const client = clientClient({
    infer: (i) => ({ io: i<AppPluvIO> }),
    authEndpoint: () => "{{your auth endpoint}}",
    wsEndpoint: () => "{{your ws endpoint}}",
    // Optional: Specify which CRDT you are using, as well as the initial storage
    initialStorage: yjs.doc(() => ({})),
});

export const {
    // components
    PluvProvider,
    PluvRoomProvider,

    // utils
    event,

    // hooks
    useBroadcast,
    useClient,
    useConnection,
    useEvent,
    useMyPresence,
    useMyself,
    useOther,
    useOthers,
    useRoom,
    useStorage,
} = createBundle(client);

Create Bundle

Create a PluvIO instance

Create a Pluv React bundle

Next Steps