// 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 hookimport { 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> );}
3. Initialize Document
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.
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.
React / Next.js with Hooks
React / Next.js
HTML
Angular
Vue.js
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.
Copy
Ask AI
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.
React / Next.js with Hooks
React / Next.js
HTML
Angular
Vue.js
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.
Copy
Ask AI
import { useSetDocument } from '@veltdev/react';useSetDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_ID'});
Copy
Ask AI
// 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 hookimport { 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> );}