Getting startedReact tutorial

//Displaying others

Displaying others

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.

Modify the code in /Room.tsx
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.

Modify the code in /Room.tsx
// 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.