ParticipantItemProps interface

Package:

@azure/communication-react

Props for ParticipantItem.

Properties

ariaLabelledBy	Optional aria property that prefixes the ParticipantItems aria content Takes in a unique id value of the element you would like to be read before the ParticipantItem.
displayName	Name of participant.
me	Optional indicator to show participant is the user.
menuItems	Optional array of IContextualMenuItem for contextual menu.
onClick	Optional callback when component is clicked
onRenderAvatar	Optional callback returning a JSX element to override avatar.
onRenderIcon	Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons.
participantState	Optional value to determine and display a participants connection status. For example, Connecting, Ringing etc. The actual text that is displayed is determined by the localized string corresponding to the provided participant state. For example, strings.participantStateConnecting will be used if participantState is Connecting.
presence	Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned.
showParticipantOverflowTooltip	Optional value to determine if the tooltip should be shown for participants or not
strings	Optional strings to override in component
styles	Allows users to pass in an object contains custom CSS styles.
userId	Unique User ID of the participant. This userId is available in the onRenderAvatar callback function

Property Details

ariaLabelledBy

Optional aria property that prefixes the ParticipantItems aria content Takes in a unique id value of the element you would like to be read before the ParticipantItem.

ariaLabelledBy?: string

Property Value

string

displayName

Name of participant.

displayName?: string

Property Value

string

me

Optional indicator to show participant is the user.

me?: boolean

Property Value

boolean

menuItems

Optional array of IContextualMenuItem for contextual menu.

menuItems?: IContextualMenuItem[]

Property Value

IContextualMenuItem[]

onClick

Optional callback when component is clicked

onClick?: (props?: ParticipantItemProps) => void

Property Value

(props?: ParticipantItemProps) => void

onRenderAvatar

Optional callback returning a JSX element to override avatar.

onRenderAvatar?: OnRenderAvatarCallback

Property Value

OnRenderAvatarCallback

onRenderIcon

Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons.

onRenderIcon?: (props?: ParticipantItemProps) => null | Element

Property Value

(props?: ParticipantItemProps) => null | Element

participantState

Optional value to determine and display a participants connection status. For example, Connecting, Ringing etc. The actual text that is displayed is determined by the localized string corresponding to the provided participant state. For example, strings.participantStateConnecting will be used if participantState is Connecting.

participantState?: ParticipantState

Property Value

ParticipantState

presence

Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned.

presence?: PersonaPresence

Property Value

PersonaPresence

showParticipantOverflowTooltip

Optional value to determine if the tooltip should be shown for participants or not

showParticipantOverflowTooltip?: boolean

Property Value

boolean

strings

Optional strings to override in component

strings?: Partial<ParticipantItemStrings>

Property Value

Partial<ParticipantItemStrings>

styles

Allows users to pass in an object contains custom CSS styles.

styles?: ParticipantItemStyles

Property Value

ParticipantItemStyles

userId

Unique User ID of the participant. This userId is available in the onRenderAvatar callback function

userId?: string

Property Value

string