Hiyve Components - v1.0.0
    Preparing search index...

    Function ParticipantList

    • ParticipantList displays a scrollable list of room participants with their status indicators and optional owner controls.

      Requirement: Must be used inside a <HiyveProvider> component.

      Parameters

      Returns ReactElement

      The rendered ParticipantList component

      The component automatically integrates with the HiyveProvider context to:

      • Get the list of participants (local + remote)
      • Determine room ownership for showing owner controls
      • Handle remote mute/unmute operations
      • Track and set the dominant speaker

      Status Indicators:

      • Avatar: Colored initials (deterministic color based on userId)
      • Owner badge: Star icon for room owner
      • Dominant speaker: Gold star icon for the featured participant
      • Hand raised: Pan tool icon when hand is raised
      • Speaking: Voice icon and left border when speaking
      • Mute status: Mic/camera/speaker icons showing muted state

      Owner Controls (automatic for room owners):

      • Remote mute/unmute audio
      • Remote disable/request camera
      • Mute participant's audio output locally
      • Remove participant from room (via callback)
      • Click to set dominant speaker (for speaker/sidebar layouts)

      Automatic Sorting: Participants are sorted: local user first, then owner, then alphabetically.

      Full Customization: All text labels, icons, colors, and styles can be customized through props.

      Basic usage inside HiyveProvider:

      import { HiyveProvider } from '@hiyve/react';
      import { ParticipantList } from '@hiyve/react-ui';

      function VideoRoom() {
        return (
          <HiyveProvider client={client} roomName={roomName} userId={userId}>
            <VideoGrid />
            <ParticipantList
              localUserName="John Doe"
              maxHeight={400}
            />
          </HiyveProvider>
        );
      }

      With remove participant callback:

      <ParticipantList
        localUserName={userName}
        onRemoveParticipant={async (userId) => {
          await client.removeParticipant(userId);
        }}
      />

      Full customization:

      <ParticipantList
        localUserName={userName}
        title="In this meeting"
        enableDominantClick={false}
        labels={{
          localUserSuffix: '(me)',
          roomOwner: 'Host',
        }}
        colors={{
          headerBackground: '#1a1a1a',
          speakingBorder: '#00ff00',
        }}
        styles={{
          avatarSize: 48,
          borderRadius: 8,
        }}
        renderProps={{
          renderParticipant: (participant, isLocal, defaultContent) => (
            <Box sx={{ opacity: participant.isSpeaking ? 1 : 0.7 }}>
              {defaultContent}
            </Box>
          ),
        }}
        onParticipantClick={(userId) => setSelectedUser(userId)}
      />
      • ParticipantListProps for all available props
      • ParticipantInfo for participant data structure
      • ParticipantListLabels in types for customizable text labels
      • ParticipantListColors in types for color configuration

    Settings

    Member Visibility