Create Your Own UI

Import the useCursorUsers hook.

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

const cursorUsers = useCusorUsers()

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.

return (
  <div>
    Cursor Users: {cursorUsers.length}
    {
      cursorUsers.map( x => <div>{x.name} </div>)
    }
  </div>
)

Import the useVeltClient React hook.

You can use this hook within your component to fetch the Velt client.

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

Create the hook with the client as a dependency.

Make sure to check if the client is null or undefined before you use it.

useEffect(() => {
    if (client) {
        //...
    }
  }, [client]);

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.

const cursorElement = client.getCursorElement();

let subscription = cursorElement.getOnlineUsersOnCurrentDocument().subscribe((_cursorUsers) => {
// Do something with Cursor Users list
});

To unsubscribe from the subscription:

subscription?.unsubscribe()

Fetch the cursor element from the Velt client.

const cursorElement = window.Velt.getCursorElement();

At this point, the Velt instance should be loaded and available to you on the window object.

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.

let subscription = cursorElement.getOnlineUsersOnCurrentDocument().subscribe((cursors) => {
    // Do something with cursors list
});

To unsubscribe from the subscription:

subscription?.unsubscribe()