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

export default function App() {

  const { client } = useVeltClient();

  useEffect(() => {
    if (client) {

      const cursorElement = client.getCursorElement();

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

    }
  }, [client]);

  return (
    <>
    </>
  );
}

  • React / Next.js

  • HTML

1

Get the Velt client

Import the useVeltClient React hook.

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

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

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.

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

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.

const cursorElement = client.getCursorElement();

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

Was this page helpful?

VariablesOverview