Vizel API / react/src / useVizelCollaboration

Function: useVizelCollaboration()

function useVizelCollaboration(provider, options?): UseVizelCollaborationResult;

Defined in: packages/react/src/hooks/useVizelCollaboration.ts:90

Hook for tracking real-time collaboration state with a Yjs provider.

This hook manages event listeners on the provider to track connection status, sync state, and peer count. It does NOT create the Yjs document or provider — users must create those themselves and pass them in.

Parameters

Parameter	Type	Default value	Description
provider	| VizelYjsProvider | null | undefined	undefined	The Yjs provider instance (or null while it is still initializing)
options	VizelCollaborationOptions	DEFAULT_OPTIONS	Collaboration options including user info and callbacks

Returns

UseVizelCollaborationResult

Collaboration state and controls

Example

import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";
import Collaboration from "@tiptap/extension-collaboration";
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
import { useVizelEditor, useVizelCollaboration } from "@vizel/react";

function CollaborativeEditor() {
  const [doc] = useState(() => new Y.Doc());
  const [provider] = useState(
    () => new WebsocketProvider("ws://localhost:1234", "my-doc", doc)
  );

  const { isConnected, peerCount } = useVizelCollaboration(
    provider,
    { user: { name: "Alice", color: "#ff0000" } }
  );

  const editor = useVizelEditor({
    features: { collaboration: { provider: true } },
    extensions: [
      Collaboration.configure({ document: doc }),
      CollaborationCursor.configure({
        provider,
        user: { name: "Alice", color: "#ff0000" },
      }),
    ],
  });

  return (
    <div>
      <span>{isConnected ? "Connected" : "Disconnected"} ({peerCount} peers)</span>
      <VizelEditor editor={editor} />
    </div>
  );
}