Packages@robojs/sync

SyncCursors()

Function: SyncCursors()

function SyncCursors<ClientData>(props): React.ReactElement

Pre-built component that renders all participant cursors automatically.

Just drop it into your app and cursors will appear for all connected users. Automatically handles mouse tracking, throttling, and smooth positioning.

Type Parameters

Type Parameter	Default type
`ClientData`	`unknown`

Parameters

Parameter	Type
`props`	`SyncCursorsProps`<`ClientData`>

Returns

React.ReactElement

Examples

function Activity() {
  return (
    <div style={{ position: 'relative', width: '100vw', height: '100vh' }}>
      <SyncCursors roomKey={['room', odId]} />
      {/* Your content */}
    </div>
  )
}

// With custom cursor rendering
<SyncCursors
  roomKey={['room', odId]}
  renderCursor={(cursor) => (
    <div style={{ color: cursor.user.data?.color }}>
      <CustomCursorIcon />
      <span>{cursor.user.data?.name}</span>
    </div>
  )}
/>

SyncContextProvider()

Previous

SyncDraggable()

Next

On this page

Function: SyncCursors()

Type Parameters