@pluv/react NPM

Disclaimer: This package is currently in preview and may have breaking changes between versions. Please wait for a v1.0.0 stable release before using this in production.

`@pluv/react`

React.js bindings for @pluv/client.

👉 See full documentation on pluv.io. 👈

Installation

# npm
npm install @pluv/react @pluv/crdt-yjs yjs zod

# yarn
yarn add @pluv/react @pluv/crdt-yjs yjs zod

# pnpm
pnpm add @pluv/react @pluv/crdt-yjs yjs zod

Basic Example

import { yjs } from "@pluv/crdt-yjs";
import { createBundle, createClient } from "@pluv/react";
import { z } from "zod";
// Import the PluvIO instance as a type from your server file
import { type io } from "./server";

// Initialize the @pluv/client client
const client = createClient<typeof io>({
    authEndpoint: (room) => {
        return `https://localhost:3000/api/authorize?room=${room}`;
    },
    wsEndpoint: (room) => {
        return `ws://localhost:3000/api/room/${room}`;
    },
});

export const {
    // factories
    createRoomBundle,

    // components
    PluvProvider,

    // hooks
    useClient,
} = createBundle(client);

export const {
    // components
    PluvRoomProvider,

    // hooks
    useBroadcast,
    useConnection,
    useEvent,
    useMyPresence,
    useMyself,
    useOther,
    useOthers,
    useRoom,
    useStorage,
} = createRoomBundle({
    initialStorage: yjs.doc(() => ({
        messages: yjs.array([
            yjs.object({
                message: "Hello World!",
                name: "johnathan_doe",
            }),
        ]),
    })),
    presence: z.object({
        cursor: z.nullable(
            z.object({
                x: z.number(),
                y: z.number(),
            })
        ),
    }),
});

import { FC } from "react";

export const MyPage: FC<Record<string, never>> = () => {
    return (
        <PluvProvider>
            <MyRoom />
        </PluvProvider>
    );
};

export const MyRoom: FC<Record<string, never>> = () => {
    const broadcast = useBroadcast();

    useEvent("RECEIVE_MESSAGE", ({ data }) => {
        // data is typed as { message: string }
        console.log(data.message);
    });

    return (
        <button
            onClick={() => {
                broadcast("SEND_MESSAGE", {
                    // TypeScript will require that message is typed as string
                    message: "Hello world!",
                });
            }}
            type="button"
        >
            Send Message
        </button>
    );
};