Create Your Own UI
Get the useCursorUsers Hook
Import the useCursorUsers
hook.
Display Cursor Users List with your own UI
The cursorUsers
hook will return an array of User objects.
You can map the Cursor Users List to generate your own custom UI.
The hook will automatically unsubscribe from the subscription when the component dismounts.
Get the useCursorUsers Hook
Import the useCursorUsers
hook.
Display Cursor Users List with your own UI
The cursorUsers
hook will return an array of User objects.
You can map the Cursor Users List to generate your own custom UI.
The hook will automatically unsubscribe from the subscription when the component dismounts.
Get the Velt client
Import the useVeltClient
React hook.
You can use this hook within your component to fetch the Velt client.
Create a useEffect hook
Create the hook with the client as a dependency.
Make sure to check if the client is null or undefined before you use it.
Subscribe to live cursors
Subscribe to the realtime Cursor users data on the current document and location.
We will send you a new list of cursors everytime there is a change so you can build out your own cursor UI.
To unsubscribe from the subscription:
Get an instance of the cursor element
Fetch the cursor element from the Velt client.
At this point, the Velt instance should be loaded and available to you on the window object.
Subscribe to live cursors
Subscribe to constant cursor changes.
We will send you a new list of cursors everytime there is a change so you can build out your own cursor UI and logic.
To unsubscribe from the subscription: