Setup
3. Initialize Document
A Document is the space where you want your users to collaborate. For a design tool it's the canvas. For a video editor, it's the editor. For a documentation tool, it's the document etc. A document is like a virtual house. Users in the same virtual house can see and interact with each other.
React / Next.js
HTML
It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider.
Realistically, these steps should be done inside your component that represents your document.
1) Get the Velt client
Import the useVeltClient
React hook.
You can use this hook within your component to fetch the Velt client.
import { useVeltClient } from '@veltdev/react';
const { client } = useVeltClient();
3) Create a useEffect hook
Create an effect with the client as a dependency.
Make sure to check if the client is null
or undefined
before you use it.
useEffect(() => {
if (client) {
//set document ID
}
}, [client]);
4) Set a document ID
When your document has initialized and is ready for collaboration, call the setDocumentId()
method and pass a unique ID representing your document.
Users logged into the same document ID can see each other’s presence, cursors, comments etc.
The SDK will not work without this call.
You can use separate document IDs to represent separate documents.
client.setDocumentId('unique-document-id');
// 1) Create a component that will represent your document
//Warning: Make sure this is a child component to VeltProvider
//and not within the same file where VeltProvider is placed.
// 2) Get the Velt client
import { useVeltClient } from '@veltdev/react';
import { useEffect, useState } from 'react';
export default function YourDocument() {
const { client } = useVeltClient();
// 3) Create a useEffect hook
useEffect(() => {
if (client) {
// 4) Set a document ID
client.setDocumentId('unique-document-id');
}
}, [client]);
return (
<div>
//your document template
</div>
);
}
Was this page helpful?
// 1) Create a component that will represent your document
//Warning: Make sure this is a child component to VeltProvider
//and not within the same file where VeltProvider is placed.
// 2) Get the Velt client
import { useVeltClient } from '@veltdev/react';
import { useEffect, useState } from 'react';
export default function YourDocument() {
const { client } = useVeltClient();
// 3) Create a useEffect hook
useEffect(() => {
if (client) {
// 4) Set a document ID
client.setDocumentId('unique-document-id');
}
}, [client]);
return (
<div>
//your document template
</div>
);
}