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.

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;

Create a Pluv React bundle

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});

Next Steps