Working with participants

Participants are the core of any call UI. Daily React gives you a set of hooks for reading participant state, designed so that you subscribe to the smallest slice you need and re-render only when it changes.

List participants

useParticipantIds returns an array of participant session IDs and updates as people join and leave. It is the starting point for any grid or list:

import { useParticipantIds } from '@daily-co/daily-react';

function CallGrid() {
  const participantIds = useParticipantIds();
  return participantIds.map((id) => <Tile key={id} sessionId={id} />);
}

Filter and sort

Pass filter and sort to scope the list. String-based filters and sorts are computed directly from the internal store and are cheaper than a custom function evaluated at runtime:

// Remote participants only, sorted by join time
const remoteIds = useParticipantIds({
  filter: 'remote',
  sort: 'joined_at',
});

Built-in filters are 'local', 'remote', 'screen', 'owner', and 'record'; built-in sorts are 'joined_at', 'session_id', 'user_id', and 'user_name'. For anything more specific, pass a function that receives the full participant object:

const handRaisedIds = useParticipantIds({
  filter: (p) => Boolean(p.userData?.handRaised),
});

Prefer the string filters and sorts when they fit. They run against the store and avoid re-evaluating a callback on every participant on every change.

useParticipantIds also accepts event callbacks (onParticipantJoined, onParticipantLeft, onParticipantUpdated, onActiveSpeakerChange) if you need to react to a change rather than just render the current list.

Read a single property

useParticipantProperty reads one property (or a few) of a participant and re-renders only when that property changes. This is the workhorse hook for tiles:

import { useParticipantProperty } from '@daily-co/daily-react';

function Tile({ sessionId }) {
  const userName = useParticipantProperty(sessionId, 'user_name');
  const audioState = useParticipantProperty(sessionId, 'tracks.audio.state');
  return (
    <div>
      <span>{userName}</span>
      {audioState === 'off' && <MutedIcon />}
    </div>
  );
}

Dot paths reach nested properties ('tracks.video.subscribed'), and you can request several at once by passing an array:

const [isOwner, userName] = useParticipantProperty(sessionId, [
  'owner',
  'user_name',
]);

Use useParticipantProperty instead of the deprecated useParticipant, which returns the whole participant object and re-renders on any change to it. useParticipant, useLocalParticipant, and useActiveParticipant were all deprecated in 0.17.0 for this reason.

The local participant

You usually want the local participant’s session ID, not the whole object. useLocalSessionId gives you just that, and you compose it with the other hooks:

import { useLocalSessionId, useParticipantProperty } from '@daily-co/daily-react';

function LocalName() {
  const localSessionId = useLocalSessionId();
  const userName = useParticipantProperty(localSessionId, 'user_name');
  return <span>You are {userName}</span>;
}

Who is speaking

useActiveSpeakerId returns the session ID of the current active speaker, or null when nobody has spoken. Pass ignoreLocal to exclude yourself, or a filter to limit which participants can become the active speaker:

import { useActiveSpeakerId, DailyVideo } from '@daily-co/daily-react';

function Spotlight() {
  const activeSpeakerId = useActiveSpeakerId({ ignoreLocal: true });
  if (!activeSpeakerId) return null;
  return <DailyVideo sessionId={activeSpeakerId} type="video" />;
}

See Active speaker and audio levels for speaking indicators and volume meters.

Count participants

useParticipantCounts returns present and hidden counts. hidden counts participants with hasPresence: false, such as observers or bots:

import { useParticipantCounts } from '@daily-co/daily-react';

function Header() {
  const { present } = useParticipantCounts();
  return <span>{present} in call</span>;
}

Choosing the right hook

You need	Hook
The list of participants to render	`useParticipantIds`
One property of a participant	`useParticipantProperty`
The local participant’s session ID	`useLocalSessionId`
The current speaker	`useActiveSpeakerId`
Head counts	`useParticipantCounts`
To admit or deny people in the lobby	`useWaitingParticipants` (see Permissions)

Getting Started

Core Concepts

Building Call Features

Working with participants

List participants

Filter and sort

Read a single property

The local participant

Who is speaking

Count participants

Choosing the right hook

Next steps

Rendering media

Active speaker and audio levels

​List participants

​Filter and sort

​Read a single property

​The local participant

​Who is speaking

​Count participants

​Choosing the right hook

​Next steps

Rendering media

Active speaker and audio levels

List participants

Filter and sort

Read a single property

The local participant

Who is speaking

Count participants

Choosing the right hook

Next steps