Now that we’re connected to a room, we can start using the Liveblocks hooks. The
first we’ll add is useOthers
, a hook that provides information about which
other users are connected to the room.
Switch to Room.tsx
and import the hook from liveblocks.config.ts
—we’ll
be building our real-time app in here.
import { useOthers } from "./liveblocks.config";
The useOthers
hook returns a list of users that are currently online,
along with their data. We can access .length
to return the current online user
count.
// Add useOthersconst others = useOthers();const userCount = others.length;
Add these lines to Room.tsx
to see the beginnings of an online app! We’ll be
coming back to useOthers
again shortly after learning about presence.