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.

Suspense hooks

From this point on, we’ll be using the Suspense version of our hooks and components, which we’ve enabled by adding ClientSideSuspense to App.tsx. To use them, export from @liveblocks/react/suspense.

useOthers

Switch to Room.tsx and import the suspense version of hook—we’ll be building our realtime app in this component.

Modify the code in /Room.tsx
import { useOthers } from "@liveblocks/react/suspense";

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.

We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.