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 { createIO } from "@pluv/io";
4import { platformNode } from "@pluv/platform-node";
5
6export const io = createIO({ platform: platformNode() });
7
8// Export the websocket client io type, instead of the client itself
9export 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 { createBundle, createClient } from "@pluv/react";
4import { z } from "zod";
5// import your PluvIO instance from your backend codebase
6import { type AppPluvIO } from "backend/io";
7
8const client = clientClient<AppPluvIO>({
9    authEndpoint: () => "{{your auth endpoint}}",
10    wsEndpoint: () => "{{your ws endpoint}}",
11});
12
13export const {
14    // factories
15    createRoomBundle,
16
17    // components
18    PluvProvider,
19
20    // hooks
21    usePluvClient,
22} = createBundle(client);
23
24export const {
25    // components
26    PluvRoomProvider,
27
28    // hooks
29    usePluvBroadcast,
30    usePluvConnection,
31    usePluvEvent,
32    usePluvMyPresence,
33    usePluvMyself,
34    usePluvOther,
35    usePluvOthers,
36    usePluvRoom,
37    usePluvStorage,
38} = createRoomBundle();

Create a PluvIO instance

Create a Pluv React bundle

Next Steps