BoardKitFrontend
usePresence
Participant list and cursor positions
usePresence provides the list of active participants and their cursor positions for rendering avatars and remote cursors.
Signature
function usePresence(): UsePresenceResult;Return Type
interface UsePresenceResult {
participants: Participant[];
cursors: CursorPosition[];
}Participant
interface Participant {
userId: string;
displayName: string;
color: string;
cursorPosition?: Point;
activePageId?: string;
activeTool?: string;
viewportBounds?: Rect;
joinedAt: string;
}CursorPosition
interface CursorPosition {
userId: string;
position: Point;
pageId: string;
}Usage
import { usePresence } from '@hfu.digital/boardkit-react';
function ParticipantAvatars() {
const { participants } = usePresence();
return (
<div>
{participants.map((p) => (
<span
key={p.userId}
style={{ backgroundColor: p.color }}
title={p.displayName}
>
{p.displayName[0]}
</span>
))}
</div>
);
}function RemoteCursors() {
const { cursors, participants } = usePresence();
return (
<>
{cursors.map((cursor) => {
const participant = participants.find(p => p.userId === cursor.userId);
return (
<div
key={cursor.userId}
style={{
position: 'absolute',
left: cursor.position.x,
top: cursor.position.y,
}}
>
<span>{participant?.displayName}</span>
</div>
);
})}
</>
);
}Notes
- Participants are automatically added/removed as they join/leave the WebSocket session.
- Cursor positions are updated in real-time via the
cursor:broadcastWebSocket message. - When a participant disconnects, their cursor is removed from the store.