How to Add a Live "Who's Online" List to Your React App in 5 Minutes

#javascript #react #webdev #tutorial

Modern collaborative apps have a magical feature: that little pile of avatars in the corner showing you who else is on the team and who's currently active. In tools like Figma or Slack, this rich presence transforms a simple user list into a dynamic team dashboard.

Building this feature is traditionally complex. It requires a backend to merge a static list of team members with real-time connection data, manage sessions, and broadcast updates.

What if you could do it all with a single, powerful React component?

In this tutorial, we'll go beyond a basic "who's online" list and build a rich team presence indicator in minutes, showcasing the advanced features of the Vaultrice <Presence /> component.

The Goal: A Rich Team Presence Component

We will build a presence indicator that:

Shows a predefined list of team members.
Clearly indicates who is online (full color) and offline (faded).
Merges real-time connection data with the predefined user list.
Is fully customizable to match our brand.

Step 1: The "Backend" & Setup (90 seconds)

First, let's get our project ready.

Get Credentials: Sign up for a free account at the Vaultrice App to get your projectId, apiKey, and apiSecret.
Install the Library: Install the pre-built Vaultrice React components.
```
npm install @vaultrice/react-components
```

Step 2: Define Your Team & Add the Component (3.5 minutes)

The <Presence /> component can take a list of predefinedUsers. It uses this list as the "source of truth" and merges it with live connection data.

Let's create our TeamPresence.tsx component:

import React from 'react';
import { Presence } from '@vaultrice/react-components';
import type { JoinedConnection } from '@vaultrice/sdk';

// in production you may want to pass the credentials vie environment variables, and maybe also use the access token mechanism: https://www.vaultrice.com/docs/security#authentication-methods
const credentials = {
  projectId: 'YOUR_PROJECT_ID',
  apiKey: 'YOUR_API_KEY',
  apiSecret: 'YOUR_API_SECRET'
};
const currentUser = {
  id: 'jane-456',
  name: 'Jane Smith',
  avatarUrl: 'https://i.pravatar.cc/150?u=jane-smith',
  role: 'Developer'
};

// This is your predefined list of all team members for this project
const teamMembers = [
  { id: 'john-123', name: 'John Doe', role: 'Team Lead', avatarUrl: '...' },
  { id: 'jane-456', name: 'Jane Smith', role: 'Developer', avatarUrl: '...' },
  { id: 'bob-789', name: 'Bob Wilson', role: 'Designer' }
];

export function TeamPresence() {
  return (
    <div className="presence-container">
      <h3>Project Team:</h3>
      <Presence
        id="project-alpha-presence"
        user={currentUser}
        credentials={credentials}
        predefinedUsers={teamMembers}
        showOfflineUsers={true}
        maxAvatars={6}
      />
    </div>
  );
}

With this single component, you've implemented a complete team presence system.

What We Just Did (The Advanced Features Explained)

This is far more than a simple list of who's online. Let's break down a few props we used from the <Presence /> component:

predefinedUsers={teamMembers}: We provided a static array of our team. The component now knows about all team members, not just the ones who are currently connected.
showOfflineUsers={true}: This tells the component to display users from the predefinedUsers list even if they are not currently connected. The component renders them with a different style (which we control in our CSS) to indicate their offline status.

Try It Yourself: Interactive Demo

Don't just take our word for it. We've published a live Storybook demo of the <Presence /> component with all the features we've discussed. You can change the current user, toggle offline visibility, and see how the component responds in real-time.

➡️ Open the Interactive Storybook Demo

Conclusion

The <Presence /> component is a powerful tool that goes far beyond a simple online indicator. By leveraging its advanced features like predefined users and custom rendering, you can build a rich, informative, and polished team presence system in minutes. This is a perfect example of how a high-level component can abstract away immense backend complexity and deliver a fantastic developer experience.

Stop building presence logic from scratch. Add a rich team presence indicator to your app today with the Vaultrice free tier.