Collaborative editing hooks

React hooks for Yjs collaborative document editing and presence management.

Integrate Yjs CRDT documents with React components. Requires the yjs peer dependency and a configured Yjs transport.

Prerequisites

yjs peer dependency installed
Yjs transport configured via yjsTransport
Sync client accessible via SyncProvider


import { createSyncClient } from "@stratasync/client";

const client = createSyncClient({
  // ... storage, transport, reactivity
  yjsTransport: createYjsTransport({
    wsEndpoint: "wss://api.example.com/yjs",
  }),
});

If client.yjs is undefined (no Yjs transport configured), useYjsDocument sets an error state and operations become no-ops.

Collaborative editing hooks

React hooks for Yjs collaborative document editing and presence management.

Integrate Yjs CRDT documents with React components. Requires the yjs peer dependency and a configured Yjs transport.

Prerequisites

yjs peer dependency installed
Yjs transport configured via yjsTransport
Sync client accessible via SyncProvider


import { createSyncClient } from "@stratasync/client";

const client = createSyncClient({
  // ... storage, transport, reactivity
  yjsTransport: createYjsTransport({
    wsEndpoint: "wss://api.example.com/yjs",
  }),
});

If client.yjs is undefined (no Yjs transport configured), useYjsDocument sets an error state and operations become no-ops.

Option	Type	Default	Description
`initialContent`	`string`	-	Initial content if the document is empty.
`autoConnect`	`boolean`	`false`	Automatically connect when the component mounts.
`editing`	`boolean`	-	Start in editing mode (signals presence).
`skip`	`boolean`	`false`	Skip connecting entirely.

Field	Type	Description
`doc`	`YDoc \| null`	The Yjs document instance. `null` before connection.
`connectionState`	`YjsConnectionState`	`"disconnected"`, `"connecting"`, `"syncing"`, or `"connected"`.
`isConnected`	`boolean`	`true` when `connectionState === "connected"`.
`isSessionActive`	`boolean`	`true` when other participants are present.
`participants`	`SessionParticipant[]`	List of current session participants.
`content`	`string`	Current text content of the document.
`connect`	`() => void`	Connect to the document.
`disconnect`	`() => void`	Disconnect from the document.
`focus`	`() => void`	Signal that you started editing.
`blur`	`() => void`	Signal that you stopped editing.
`error`	`Error \| null`	Any error that occurred.

Option	Type	Default	Description
`trackFocus`	`boolean`	`false`	Track focus via `focusin`/`focusout` on the ref element.
`trackVisibility`	`boolean`	`false`	Track visibility via `IntersectionObserver`.
`skip`	`boolean`	`false`	Skip presence tracking.

Field	Type	Description
`startViewing`	`() => void`	Start viewing the document.
`stopViewing`	`() => void`	Stop viewing the document.
`focus`	`() => void`	Signal editing focus.
`blur`	`() => void`	Signal editing blur.
`isViewing`	`boolean`	Whether you're viewing the document.
`isEditing`	`boolean`	Whether you're editing the document.
`getRef`	`<T extends HTMLElement>() => (element: T \| null) => void`	Ref callback for auto-tracking.

Collaborative editing hooks

Prerequisites

Collaborative editing hooks

Prerequisites

useYjsDocument

DocumentKey

UseYjsDocumentOptions

UseYjsDocumentResult

SessionParticipant

YjsConnectionState

useYjsPresence

UseYjsPresenceOptions

UseYjsPresenceResult

Auto-tracking with getRef