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

export default function App() {
  const cursorUsers = useCursorUsers()

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

Get the useCursorUsers Hook

Import the useCursorUsers hook.

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

const cursorUsers = useCusorUsers()
2

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.

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

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

export default function App() {
  const cursorUsers = useCursorUsers()

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

Was this page helpful?

VariablesOverview