import { VeltProvider, VeltCursor } from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">
      <VeltCursor
        avatarMode={true} {/* 1) Enable avatar mode */}
        inactivityTime={300000} {/* 2) Set inactivity time */}
        allowedElementIds={JSON.stringify(['element-1', 'element-2'])} {/* 3) Set allowed element IDs */}
        onCursorUserChange={(cursorUsers) => yourMethod(cursorUsers)} {/* 4) Subscribe to changes in User Cursors */}
      />
    </VeltProvider>
  );
}

  • React

  • HTML

1

Enable avatar mode

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.

<VeltCursor avatarMode={true} />
2

Set inactivity time

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.

<VeltCursor inactivityTime={300000} />
3

Set allowed element IDs

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.

<VeltCursor allowedElementIds={JSON.stringify(['element-1', 'element-2'])} />
You must pass a string into allowedElementIds instead of an object
4

Subscribe to changes in User Cursors

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.

<VeltCursor onCursorUserChange={(cursorUsers) => yourMethod(cursorUsers)} />

Was this page helpful?

SetupSlots