MediaSFU ReactJS
    Preparing search index...

    Variable ParticipantsModalConst

    ParticipantsModal: React.FC<ParticipantsModalOptions> = ...

    ParticipantsModal - Comprehensive participant management interface

    A feature-rich modal for viewing and managing meeting participants with search, filtering, and moderator controls. Displays separate lists for moderators and attendees with role-based actions (mute, message, remove).

    Features:

    • Real-time participant count badge
    • Search/filter functionality for large participant lists
    • Separate moderator and attendee sections
    • Role-based action buttons (mute, message, remove)
    • Co-host permission controls
    • Direct messaging initiation
    • Custom render hooks for complete UI flexibility
    • Responsive positioning (topRight, topLeft, etc.)

    Configuration options

    Modal visibility state

    Callback when modal is closed

    Callback when search filter changes

    Total participant count for badge

    Handler for muting participants (defaults to built-in)

    Handler for messaging participants (defaults to built-in)

    Handler for removing participants (defaults to built-in)

    Custom component for moderator list

    Custom component for attendee list

    MediaSFU parameters object

    Modal background color

    Modal position on screen

    Modal title content

    HTML attributes for overlay div

    HTML attributes for content container

    HTML attributes for header section

    HTML attributes for title element

    HTML attributes for badge wrapper

    HTML attributes for count badge

    HTML attributes for close button

    Custom close icon

    HTML attributes for body section

    HTML attributes for search wrapper

    HTML attributes for search input

    HTML attributes for lists container

    HTML attributes for moderator section

    HTML attributes for attendee section

    Content when no participants match filter

    Custom header renderer

    Custom search renderer

    Custom participant lists renderer

    Custom body renderer

    Custom content renderer

    Rendered participants modal

    // Basic participant modal with default controls

    import React, { useState } from 'react';
    import { ParticipantsModal } from 'mediasfu-reactjs';

    function Meeting({ parameters }) {
      const [isVisible, setIsVisible] = useState(false);
      const [filter, setFilter] = useState('');

      return (
        <>
          <button onClick={() => setIsVisible(true)}>
            Show Participants ({parameters.participants.length})
          </button>
          <ParticipantsModal
            isParticipantsModalVisible={isVisible}
            onParticipantsClose={() => setIsVisible(false)}
            onParticipantsFilterChange={setFilter}
            participantsCounter={parameters.participants.length}
            parameters={parameters}
            backgroundColor="#0f172a"
            position="topRight"
          />
        </>
      );
    }

    // Custom styling with branded colors

    import { ParticipantsModal } from 'mediasfu-reactjs';

    function BrandedParticipants({ isVisible, onClose, parameters, participantCount }) {
      return (
        <ParticipantsModal
          isParticipantsModalVisible={isVisible}
          onParticipantsClose={onClose}
          onParticipantsFilterChange={(filter) => console.log('Filter:', filter)}
          participantsCounter={participantCount}
          parameters={parameters}
          backgroundColor="#1e3a8a"
          position="topLeft"
          contentProps={{
            style: {
              borderRadius: 20,
              border: '2px solid #3b82f6',
              boxShadow: '0 20px 60px rgba(59,130,246,0.3)',
            },
          }}
          badgeProps={{
            style: {
              backgroundColor: '#22c55e',
              color: 'white',
              fontWeight: 700,
              padding: '4px 12px',
              borderRadius: 12,
            },
          }}
          searchInputProps={{
            placeholder: 'Search by name...',
            style: {
              borderRadius: 12,
              padding: '12px 16px',
              border: '2px solid #3b82f6',
              fontSize: 14,
            },
          }}
        />
      );
    }

    // Custom render with analytics tracking

    import { ParticipantsModal } from 'mediasfu-reactjs';

    function AnalyticsParticipants({ parameters, isVisible, onClose }) {
      return (
        <ParticipantsModal
          isParticipantsModalVisible={isVisible}
          onParticipantsClose={onClose}
          onParticipantsFilterChange={(filter) => {
            analytics.track('participant_search', { query: filter });
          }}
          participantsCounter={parameters.participants.length}
          parameters={parameters}
          onMuteParticipants={async (options) => {
            analytics.track('participant_muted', { participantId: options.participant.id });
            return muteParticipants(options);
          }}
          onMessageParticipants={async (options) => {
            analytics.track('direct_message_initiated', { participantId: options.participant.id });
            return messageParticipants(options);
          }}
          renderHeader={({ defaultHeader, counter }) => (
            <div style={{
              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
              padding: 20,
              borderRadius: '16px 16px 0 0',
            }}>
              {defaultHeader}
              <p style={{ color: '#e2e8f0', fontSize: 12, marginTop: 8 }}>
                {counter} active participant{counter !== 1 ? 's' : ''}
              </p>
            </div>
          )}
        />
      );
    }

    // Override with MediasfuGeneric uiOverrides

    import { MediasfuGeneric, ParticipantsModal } from 'mediasfu-reactjs';

    const uiOverrides = {
      participantsModal: {
        component: (props) => (
          <ParticipantsModal
            {...props}
            backgroundColor="#0f172a"
            position="topRight"
            contentProps={{
              style: {
                maxHeight: '80vh',
                borderRadius: 20,
                border: '2px solid #3b82f6',
              },
            }}
            searchInputProps={{
              placeholder: 'Filter participants...',
              style: {
                borderRadius: 12,
                border: '1px solid #3b82f6',
                padding: '10px 14px',
              },
            }}
          />
        ),
      },
    };

    <MediasfuGeneric uiOverrides={uiOverrides} />;

    Settings

    Member Visibility