• 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?

2. AuthenticateAdvanced Setup Options