Client
Client-side implementation of DocSync
createDocSyncClient
Creates a DocSync client instance along with React hooks for document synchronization.
import { createDocSyncClient } from "@docukit/docsync-react/client";
const { client, useDoc, usePresence } = createDocSyncClient({
docBinding,
server: {
url: "http://localhost:8080",
auth: { getToken: async () => await fetchAuthToken() },
},
local: {
provider: indexedDBProvider,
getIdentity: async () => ({
userId: "user-123",
secret: await fetchUserSecret(),
}),
},
timing: { collabMaxDebounce: 50, singleClientMaxDebounce: 3000 },
});Props
Prop
Type
Returns
Prop
Type
useDoc
React hook that subscribes to a document with reactive state updates.
const result = useDoc({ type: "notes", id: "doc-123" });
const result = useDoc({ type: "notes", id: "doc-123", createIfMissing: true });Props
Prop
Type
Returns
Prop
Type
usePresence
React hook that subscribes to presence updates for a document and provides a setter function.
const [presence, setPresence] = usePresence({ docId: "doc-123" });
setPresence({ cursor: { x: 100, y: 200 }, color: "#ff0000" });Props
Prop
Type
Returns
Prop
Type
Change Origins
DocSyncClient emits a change event whenever a loaded document changes:
client.on("change", ({ docId, origin, operation }) => {
console.log(docId, origin, operation);
});origin identifies where the operation came from:
"local": a change made by this client in this document instance."network": a change received from the DocSync server, usually from another device."local-broadcast": a change received through local broadcast from another tab or window on this device.