Flock
Api referenceReact

usePresence

Returns the list of other users currently in the room with their metadata.

import { usePresence } from "@xevrion/flock-react";

Signature

function usePresence(): PresenceUser[]

Returns

An array of PresenceUser objects for everyone in the room except yourself.

interface PresenceUser {
  userId: string;
  metadata: UserMetadata;   // name, color, avatar, and any custom fields
  joinedAt: number;          // unix ms when this user joined the room
}

Re-renders

The hook re-renders when:

  • A user joins the room
  • A user leaves the room
  • A user updates their presence metadata (via updatePresence or useMyPresence)

Usage

function OnlineUsers() {
  const users = usePresence();
 
  return (
    <div>
      {users.length === 0 ? (
        <span>Just you</span>
      ) : (
        users.map((user) => (
          <div key={user.userId} style={{ color: user.metadata.color }}>
            {user.metadata.name}
          </div>
        ))
      )}
    </div>
  );
}

Initial state

The server sends a full room snapshot (all current users) when you join. usePresence is seeded from this snapshot, so the hook is never empty for a room that already has users when you connect.

Requirements

Must be called inside a <FlockProvider>. Throws if used outside one.

See also

On this page