​
useIdentify()

Hook that calls client.identify()

import { useIdentify } from "@veltdev/react";
import { useEffect, useState } from "react";

export default function YourAuthComponent() {
  
  // Create the Velt user object
  let veltUser = {
    userId: "your-user-id",
    name: "John Smith"
    email: "jsmith@velt.dev",
    photoUrl: "https://i.pravatar.cc/304?u=user${randomNum}@velt.dev",
    organizationId: "theoffice",
  };
  

  //identify Velt user
  useIdentify(veltUser)


  return (
    <div>Your Auth Template</div>
  )
}

​
useSetDocumentId()

Hook that calls client.setDocumentId()

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

export default function YourDocument() {

  useSetDocumentId("my-document-id")

  return (
    <div>
        Your Document Template
    </div>
  )
}

​
useUnsetDocumentId()

Hook that calls client.unsetDocumentId()

import { useUnsetDocumentId } from '@veltdev/react';

export default function YourDocument() {

  useUnsetDocumentId()

  return (
    <div>
        Your Document Template
    </div>
  )
}

​
useSetLocation()

Hook that calls client.setLocation()

Hooks currently do not support automatic change detection in variables.
import { useSetLocation } from '@veltdev/react';

export default function YourDocument() {

  const handleSetLocation = () => {
    useSetLocation({
        scene: "scene1"
    })
  }


  return (
    <div>
        <button onClick={handleSetLocation}>Set Location to Scene 1</button>
    </div>
  )
}

​
useLiveStateSyncUtils()

Hook that calls client.getLiveStateSyncElement()

import { useLiveStateSyncUtils } from '@veltdev/react';

export default function YourDocument() {

  let liveStateSyncElement = useLiveStateSyncUtils()
  //Enable Single Editor Mode
  liveStateSyncElement?.enableSingleEditorMode();


  return (
    <div>
        <input/>
    </div>
  )
}

​
useLiveStateData()

Hook that calls liveStateSyncElement.getLiveStateData()

import { useLiveStateData, useSetLiveStateData} from '@veltdev/react';

export default function YourDocument() {

  //sets the live state data object
  useSetLiveStateData("myUniqueId", { 
    "myKey": "hello world!",
  })

  let data = useLiveStateData("myUniqueId")

  return (
    <div>
        {data?.myKey}
    </div>
  )
}

​
useSetLiveStateData()

Hook that calls liveStateSyncElement.setLiveStateData()

import { useLiveStateData, useSetLiveStateData} from '@veltdev/react';

export default function YourDocument() {

  useSetLiveStateData("myUniqueId", {
    "myKey": "hello world!",
  })


  //gets the live state data object
  let data = useLiveStateData("myUniqueId")

  return (
    <div>
        {data?.myKey}
    </div>
  )
}

​
useEditor()

The useEditor() hook is used to call liveStateSyncElement.getEditor() without having to handle the subscription.

import { useEditor} from '@veltdev/react';

export default function YourDocument() {

  let user = useEditor()
  console.log("Editor User Data: ", user)

  return (
    <div>
        Editor Email: {user.email}
        Editor Name: {user.name}
        Editor ID: {user.userId}
    </div>
  )
}

​
useUserEditorState()

Hook that calls liveStateSyncElement.isUserEditor()

import { useUserEditorState} from '@veltdev/react';

export default function YourDocument() {

  let isEditor = useUserEditorState()
  console.log("Is User Editor?: ", isEditor)

  return (
    <div>
        Is User Editor?: {isEditor}
    </div>
  )
}

​
useEditorAccessTimer()

With the useEditorAccessTimer hook, you can get the Editor Access Timer state.

import { useEditorAccessTimer } from '@veltdev/react';

function YourReactComponent {

    const editorAccessTimer = useEditorAccessTimer();

    useEffect(() => {
        if (editorAccessTimer?.state === 'completed') {
            onEditorAccessTimerCompleted();
        }
    }, [editorAccessTimer]);

    const onEditorAccessTimerCompleted = () => {
        // If user is editor, make requester as editor
        acceptEditorAccessRequest();
        // If user is requester, make it as editor
        setUserAsEditor();
    }
}

The editorAccessTimer class has the following schema:

  • state: 'idle' | 'inProgress' | 'completed'
  • durationLeft: number

​
useEditorAccessRequestHandler()

Hook that calls liveStateSyncElement.isEditorAccessRequested()

import { useEditorAccessRequestHandler } from '@veltdev/react';

export default function YourDocument= () {
	const editorAccessRequested = useEditorAccessRequestHandler();


  return (
    <div>
        Is Editor Access Being Requested? : {editorAccessRequested}
    </div>
  )
}

​
usePresenceUtils()

Hook that calls client.getPresenceElement()

import { usePresenceUtils } from '@veltdev/react';

export default function YourDocument() {

  let presenceElement = usePresenceUtils();

  return (
    <div>
       
    </div>
  )
}

​
useCursorUtils()

Hook that calls client.getCursorElement()

import { useCursorUtils } from '@veltdev/react';

export default function YourDocument() {

  let cursorElement = useCursorUtils();

  return (
    <div>
       
    </div>
  )
}

​
useCommentUtils()

Hook that calls client.getCommentElement().

import { useCommentUtils } from '@veltdev/react';

export default function YourDocument() {

  let commentElement = useCommentUtils();

  return (
    <div>
       
    </div>
  )
}

​
useLiveSelectionUtils()

Hook that calls client.getLiveSelectElement().

import { useLiveSelectionUtils } from '@veltdev/react';

export default function YourDocument() {

  let liveSelectionElement = useLiveSelectionUtils()

  return (
    <div>
        <input/>
    </div>
  )
}

​
useRecorderUtils()

Hook that calls client.getRecorderElement().

import { useRecorderUtils } from '@veltdev/react';

export default function YourDocument() {

  let recorderElement = useRecorderUtils();

  return (
    <div>
       
    </div>
  )
}

​
useContactUtils()

Hook that calls client.getContactElement().

import { useContactUtils } from '@veltdev/react';

export default function YourDocument() {

  let contactElement = useContactUtils();

  return (
    <div>
       
    </div>
  )
}

​
useAIRewriterUtils()

Hook that calls client.getRewriterElement().

import { useAIRewriterUtils } from '@veltdev/react';

export default function YourDocument() {

  let AIRewriterElement = useAIRewriterUtils();

  return (
    <div>
       
    </div>
  )
}

​
useHuddleUtils()

Hook that calls client.getHuddleElement().

import { useHuddleUtils } from '@veltdev/react';

export default function YourDocument() {

  let huddleElement = useHuddleUtils();

  return (
    <div>
       
    </div>
  )
}

​
useCommentAnnotations()

Hook that calls commentElement.getAllCommentAnnotations()

See CommentAnnotations Class Model

import { useCommentAnnotations } from '@veltdev/react';

export default function YourDocument() {

  let commentAnnotations = useCommentAnnotations('my-document-id', { id:'my-location-id',locationName:"MyLocationName"})


  return (
    <div>
       {commentAnnotations.map(x => <div>{x.annotationId}</div>)}
    </div>
  )
}

​
useCommentModeState()

Hook that calls commentElement.onCommentModeChange()

import { useCommentModeState } from '@veltdev/react';

export default function YourDocument() {

  let commentModeState = useCommentModeState()

  return (
    <div>
       Comment Mode is turned on: {commentModeState}
    </div>
  )
}

​
useCommentAddHandler()

Hook that calls commentElement.onCommentAdd()

import { useCommentAddHandler} from '@veltdev/react';

export default function YourDocument() {

  const commentAddEvent = useCommentAddHandler();
  useEffect(() => {
    console.log('commentAddEvent', commentAddEvent);
  }, [commentAddEvent]);


  return (
    <div>
       
    </div>
  )
}

​
useCommentUpdateHandler()

Hook that calls commentElement.onCommentUpdate()

import { useCommentUpdateHandler} from '@veltdev/react';

export default function YourDocument() {

  const commentUpdateEvent = useCommentUpdateHandler();
  useEffect(() => {
    console.log('commentUpdateEvent', commentUpdateEvent);
  }, [commentUpdateEvent]);

  return (
    <div>
       
    </div>
  )
}

​
useCommentDialogSidebarClickHandler()

Hook that calls commentElement.onSidebarButtonOnCommentDialogClick()

import { useCommentDialogSidebarClickHandler} from '@veltdev/react';

export default function YourDocument() {

  const commentDialogSidebarClickEvent = useCommentDialogSidebarClickHandler();
  useEffect(() => {
    console.log('CommentDialog Sidebar button clicked');
  }, [commentDialogSidebarClickEvent]);

  return (
    <div>
       
    </div>
  )
}

​
useCursorUsers()

Hook that calls cursorElement.getOnlineUsersOnCurrentDocument()

import { useCursorUsers} from '@veltdev/react';

export default function YourDocument() {

  let cursorUsers = useCursorUsers()

  return (
    <div>
       Users: {cursorUsers.length} 
    </div>
  )
}

​
usePresenceUsers()

Hook that calls presenceElement.getOnlineUsersOnCurrentDocument()

import { usePresenceUsers} from '@veltdev/react';

export default function YourDocument() {

  let presenceUsers = usePresenceUsers()

  return (
    <div>
       Users: {presenceUsers.length} 
    </div>
  )
}

​
useRecorderAddHandler()

Hook that calls recorderElement.onRecordedData()

import { useRecorderAddHandler} from '@veltdev/react';

export default function YourDocument() {

  const recorderAddEvent = useRecorderAddHandler();

  useEffect(() => {
    console.log('recorderAddEvent', recorderAddEvent);
  }, [recorderAddEvent]);

  return (
    <div>
       
    </div>
  )
}

​
useCommentSelectionChange

Hook that calls commentElement.onCommentSelectionChange

import React, { useEffect } from 'react';
import { useCommentSelectionChangeHandler } from '@veltdev/react';

function YourComponent() {
    const commentSelectionChangeEvent = useCommentSelectionChangeHandler();

    useEffect(() => {
        console.log('commentSelectionChangeEvent', commentSelectionChangeEvent);
    }, [commentSelectionChangeEvent]);

    return (
        <>
            Selected Comment: {commentSelectionChange.annotation.id}
        </>
    );
}

​
useVeltInitState

Hook that calls client.getVeltInitState()

import { useVeltInitState } from '@veltdev/react';

function YourComponent() {
    const veltInitState = useVeltInitState();
    useEffect(() => {
        console.log('Velt Init State:', veltInitState);
        if (veltInitState) {
            // Velt state is initialized, so user can perform any action here
        }
    }, [veltInitState]);
}

​
useUnreadCommentCountByAnnotationId

import { useUnreadCommentCountByAnnotationId } from '@veltdev/react';

export default function YourDocument() {

  let unreadCommentCountByAnnotationId = useUnreadCommentCountByAnnotationId(annotationId);

  return (
    <div>
       Unread Comment Count By Annotation Id: {unreadCommentCountByAnnotationId}
    </div>
  )
}

​
useUnreadCommentAnnotationCountOnCurrentDocument

import { useUnreadCommentAnnotationCountOnCurrentDocument } from '@veltdev/react';

export default function YourDocument() {

  let unreadCommentAnnotationCountOnCurrentDocument = useUnreadCommentAnnotationCountOnCurrentDocument();

  return (
    <div>
      Unread Comment Annotations: {unreadCommentAnnotationCountOnCurrentDocument}
    </div>
  )
}

​
useUnreadCommentCountOnCurrentDocument

import { useUnreadCommentCountOnCurrentDocument } from '@veltdev/react';

export default function YourDocument() {

  let unreadCommentCountOnCurrentDocument = useUnreadCommentCountOnCurrentDocument();

  return (
    <div>
       Unread Commment Count on Current Document: {unreadCommentCountOnCurrentDocument}
    </div>
  )
}

​
useUnreadCommentAnnotationCountByLocationId

import { useUnreadCommentAnnotationCountByLocationId } from '@veltdev/react';

export default function YourDocument() {

  let unreadCommentAnnotationCountByLocationId = useUnreadCommentAnnotationCountByLocationId(locationId);

  return (
    <div>
       Unread Comment Annotations By Location: {unreadCommentAnnotationCountByLocationId}
    </div>
  )
}

​
useUnreadCommentCountByLocationId

import { useUnreadCommentCountByLocationId } from '@veltdev/react';

export default function YourDocument() {

  let unreadCommentCountByLocationId = useUnreadCommentCountByLocationId(locationId);

  return (
    <div>
       Unread Comments By Location: {unreadCommentCountByLocationId}
    </div>
  )
}

Was this page helpful?

Velt clientAutocompleteItem