// 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) Import the useSetDocumentId hook
import { useSetDocumentId } from '@veltdev/react';

export default function YourDocument() {

  // 3) Set a document ID
  useSetDocumentId('unique-document-id');

  return (
    <div>
      //your document template - add Velt Components here
    </div>
    
  );
}
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

Import the useSetDocumentId hook

Import the useSetDocumentId hook.

import { useSetDocumentId } from '@veltdev/react';
2

Set a document ID

When your document has initialized and is ready for collaboration, call the useSetDocumentId() hook 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.

useSetDocumentId('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) Import the useSetDocumentId hook
import { useSetDocumentId } from '@veltdev/react';

export default function YourDocument() {

  // 3) Set a document ID
  useSetDocumentId('unique-document-id');

  return (
    <div>
      //your document template - add Velt Components here
    </div>
    
  );
}