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
, andapiSecret
.-
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 thepredefinedUsers
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.
Top comments (0)