Create Bundle

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

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

1// backend/io.ts
2
3import { yjs } from "@pluv/crdt-yjs";
4import { createIO } from "@pluv/io";
5import { platformNode } from "@pluv/platform-node";
6
7export const io = createIO({
8    /**
9     * @optional
10     * @description This is required if you intend to use storage. Specify crdt to use for storage
11     */
12    crdt: yjs,
13    platform: platformNode(),
14});
15
16// Export the websocket client io type, instead of the client itself
17export type AppPluvIO = typeof io;

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

1// frontend/io.ts
2
3import { yjs } from "@pluv/crdt-yjs";
4import { createBundle, createClient } from "@pluv/react";
5import { z } from "zod";
6// import your PluvIO instance from your backend codebase
7import { type AppPluvIO } from "backend/io";
8
9const client = clientClient<AppPluvIO>({
10    authEndpoint: () => "{{your auth endpoint}}",
11    wsEndpoint: () => "{{your ws endpoint}}",
12});
13
14export const {
15    // factories
16    createRoomBundle,
17
18    // components
19    PluvProvider,
20
21    // hooks
22    useClient,
23} = createBundle(client);
24
25export const {
26    // components
27    PluvRoomProvider,
28
29    // hooks
30    useBroadcast,
31    useConnection,
32    useEvent,
33    useMyPresence,
34    useMyself,
35    useOther,
36    useOthers,
37    useRoom,
38    useStorage,
39} = createRoomBundle({
40    // Optional: Specify which CRDT you are using, as well as the initial storage
41    initialStorage: yjs.doc(() => ({})),
42});

Create a PluvIO instance

Create a Pluv React bundle

Next Steps