useParticipantTile

The useParticipantTile hook is used to implement the ParticipantTile and returns the props needed to render the tile.

Import

import { useParticipantTile } from "@livekit/components-react";

Remarks

The returned props include many data attributes that are useful for CSS styling purposes because they indicate the state of the participant and the track. For example: data-lk-audio-muted, data-lk-video-muted, data-lk-speaking, data-lk-local-participant, data-lk-source, data-lk-facing-mode.

Properties

{ trackRef, onParticipantClick, disableSpeakingIndicator, htmlProps, }.htmlProps

Required

React.HTMLAttributes<T>

{ trackRef, onParticipantClick, disableSpeakingIndicator, htmlProps, }.disableSpeakingIndicatorboolean

{ trackRef, onParticipantClick, disableSpeakingIndicator, htmlProps, }.onParticipantClick(event: ParticipantClickEvent) => void

{ trackRef, onParticipantClick, disableSpeakingIndicator, htmlProps, }.trackRefTrackReferenceOrPlaceholder

The track reference to display.

Returns

{
  elementProps: React.HTMLAttributes<T>;
}