Add user avatar icons to your page for a list of user IDs - pair this component with our APIs to add real-time social cues to your app

Live Demo

When to use #

The <Facepile /> component renders a "facepile" showing the avatar icons of the user IDs you have given as an input. For example, you can use our thread API to fetch the user IDs of the participants of a thread. You can then pass this array to the Facepile component.

This component pairs well with:

How to use #

import { Facepile } from "@cord-sdk/react";

export const Example = () => (
    users={['userID_1', 'userID_2', 'userID_3']}
Vanilla JavaScript:

  users=(['userID_1', 'userID_2', 'userID_3'])
import { Facepile } from "@cord-sdk/react";

export const Example = () => (
    users={['userID_1', 'userID_2', 'userID_3']}

Properties #

users #

An array of user IDs, in the form of strings, for the avatar icons to be rendered.
Warning! If you provide an empty string or an ID that does not exist, the component will fail silently, rendering no avatar for that particular user.

enableTooltip #

When true, a tooltip with the user's displayName will appear on top of each Avatar. The default value is true

CSS customization #

If you want to customize this component, you can target the classes below in your app's CSS. These are guaranteed to be stable.

Class nameDescription
Applied to the container div. This class is always present.

Not finding the answer you need? Ask our Developer Community

Ask Cordy