Skip to main content

​
avatarMode

  • Show the user’s avatar floating next to their cursor instead of their name.
  • Enabling this mode will allow you to show the user’s avatar in context with the cursor.
  • React / Next.js
  • Other Frameworks
<VeltCursor avatarMode={true} />

​
setInactivityTime

  • Set the time it takes for a user to go inactive in milliseconds.
  • By default we mark a user as inactive if they do not take any action on the document within a 5 mins timeframe.
  • If they unfocus the tab, we mark them inactive immediately.
  • React / Next.js
  • Other Frameworks
<VeltCursor inactivityTime={300000} />
Using API:
const cursorElement = client.getCursorElement();
cursorElement.setInactivityTime(300000);

​
allowedElementIds

  • Provide a list of element IDs where the cursors should show.
  • If you provide a list of element IDs, we will only show cursors that hover over those specific elements.
  • For eg: For an app with canvas and tool picker: You can whitelist the canvas ID so that the cursors are only visible on the canvas and not the tool picker.
You must pass a string into allowedElementIds instead of an object
  • React / Next.js
  • Other Frameworks
<VeltCursor allowedElementIds={JSON.stringify(['element-1', 'element-2'])} />
Using API:
const cursorElement = client.getCursorElement();
cursorElement.allowedElementIds(['element-1', 'element-2']);

​
onCursorUserChange

  • Whenever the cursor for any user changes, we emit this event with the updated list of users currently online on this document with their cursor positions.
  • React / Next.js
  • Other Frameworks
<VeltCursor onCursorUserChange={(cursorUsers) => yourMethod(cursorUsers)} />

​
getOnlineUsersOnCurrentDocument

  • Subscribe to a list of all online users who are either active or inactive on the current document.
  • React / Next.js
  • Other Frameworks
const cursorElement = client.getCursorElement();
cursorElement.getOnlineUsersOnCurrentDocument().subscribe((cursorUsers) => {
  console.log("Online users: ", cursorUsers);
});