// 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 useSetDocument hook
import { useSetDocument } from '@veltdev/react';

export default function YourDocument() {

  // 3) Set a document ID
  useSetDocument('unique-document-id', {documentName: 'Document Name'});

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

A Document represents a shared collaborative space where users can interact. Documents live inside the Organization.

Learn more about documents here.

The Set Document method takes two parameters:

  • documentId: The unique identifier for the document.
  • metadata: (optional) This is a key/value pair object where you can set metadata about the document such as documentName. documentName is a special field that we use to display the document name in some Velt Components.
The SDK will not work without this call.

​
1. Initialize Document for the current Organization

  • By default, users can only access documents within their own organization. Use this to set the document for the current organization the user is logged into.
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.
import { useSetDocument } from '@veltdev/react';
useSetDocument('unique-document-id', {documentName: 'Document Name'});

​
2. Initialize Document for a different Organization

  • Use this to access a document from an organization different than the one the user is logged into.
  • You can enable cross-organization access by specifying the organizationId of the target document in the document metadata.
  • Ensure that the user has access to the target document in the target organization.
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.
import { useSetDocument } from '@veltdev/react';
useSetDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_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 useSetDocument hook
import { useSetDocument } from '@veltdev/react';

export default function YourDocument() {

  // 3) Set a document ID
  useSetDocument('unique-document-id', {documentName: 'Document Name'});

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