Ecosystem

Below are some optional packages that work alongside pluv.

@pluv/addon-indexeddb

Use IndexedDB to persist room storage so that when the page is reloaded, the room will load from IndexedDB on the browser. This enables offline editing.

Installation

1npm install @pluv/addon-indexeddb

Usage

1// Using @pluv/client
2
3import { addonIndexedDB } from "@pluv/addon-indexeddb";
4import { createClient } from "@pluv/client";
5import { type io } from "../server/io";
6
7const client = createClient<typeof io>();
8
9const room = client.createRoom("my-room", {
10    addons: [addonIndexedDB({ enabled: true })],
11    // Alternatively
12    addons: [addonIndexedDB({ enabled: (room) => room.id === "my-room" })],
13});
14
15// Using @pluv/react
16
17import { addonIndexedDB } from "@pluv/addon-indexeddb";
18import { createBundle, createClient } from "@pluv/react";
19
20const client = createClient<typeof io>();
21
22const { createRoomBundle } = createBundle(client);
23
24const { usePluvRoom } = createRoomBundle({
25    addons: [addonIndexedDB({ enabled: true })],
26        // Alternatively
27    addons: [addonIndexedDB({ enabled: (room) => room.id === "my-room" })],
28});