Function RequestsModal

RequestsModal - Manage participant join and feature requests

A comprehensive modal for hosts to review and respond to participant requests including meeting entry requests, screen share requests, and other permission requests. Provides search/filter functionality, request counters, and accept/reject actions. Perfect for managing meeting security and participant approvals.

Features:

• Display pending requests with counter badge
• Search/filter requests by participant name
• Accept/reject actions for each request
• Request type identification (entry, screenshare, etc.)
• Real-time request list updates via socket
• Empty state handling
• Customizable request rendering
• Extensive HTML attributes customization
• Custom render hooks for header, search, requests
• Responsive positioning

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

function RequestsManagement({ socket, roomName, parameters }) {
  const [isVisible, setIsVisible] = useState(false);
  const [requestList, setRequestList] = useState([]);
  const [searchText, setSearchText] = useState('');

  return (
    <>
      <button onClick={() => setIsVisible(true)}>
        Requests ({requestList.length})
      </button>
      <RequestsModal
        isRequestsModalVisible={isVisible}
        onRequestClose={() => setIsVisible(false)}
        requestCounter={requestList.length}
        onRequestFilterChange={setSearchText}
        requestList={requestList}
        updateRequestList={setRequestList}
        roomName={roomName}
        socket={socket}
        parameters={parameters}
        position="topRight"
        backgroundColor="#0f172a"
      />
    </>
  );
}
Copy

import { RequestsModal } from 'mediasfu-reactjs';

function BrandedRequests(props) {
  return (
    <RequestsModal
      {...props}
      backgroundColor="#1e3a8a"
      position="topLeft"
      contentProps={{
        style: {
          borderRadius: 20,
          border: '2px solid #3b82f6',
          maxHeight: '80vh',
        },
      }}
      badgeProps={{
        style: {
          background: '#ef4444',
          color: 'white',
          borderRadius: '50%',
          padding: '4px 8px',
          fontSize: 12,
          fontWeight: 600,
        },
      }}
      renderRequest={({ request, index, defaultRequest, handleRespond }) => (
        <div style={{
          padding: 16,
          background: index % 2 === 0 ? '#f8fafc' : 'white',
          borderRadius: 8,
          marginBottom: 8,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontWeight: 600 }}>{request.name || request.username}</div>
              <div style={{ fontSize: 14, color: '#64748b' }}>
                {request.icon ? `${request.icon} ` : ''}Request to join
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button
                onClick={() => handleRespond('accepted')}
                style={{
                  background: '#22c55e',
                  color: 'white',
                  border: 'none',
                  borderRadius: 8,
                  padding: '8px 16px',
                  cursor: 'pointer',
                }}
              >
                Accept
              </button>
              <button
                onClick={() => handleRespond('rejected')}
                style={{
                  background: '#ef4444',
                  color: 'white',
                  border: 'none',
                  borderRadius: 8,
                  padding: '8px 16px',
                  cursor: 'pointer',
                }}
              >
                Reject
              </button>
            </div>
          </div>
        </div>
      )}
    />
  );
}
Copy

import { RequestsModal } from 'mediasfu-reactjs';

function AnalyticsRequests(props) {
  const handleRequestAction = async (options) => {
    analytics.track('request_action', {
      action: options.action,
      requestType: options.type,
      participantName: options.request.name || options.request.username,
    });
    return props.onRequestItemPress?.(options);
  };

  return (
    <RequestsModal
      {...props}
      onRequestItemPress={handleRequestAction}
      renderHeader={({ defaultHeader, counter, onClose }) => (
        <div>
          <div style={{
            padding: 12,
            background: '#f8fafc',
            borderRadius: 8,
            marginBottom: 16,
          }}>
            <div style={{ fontWeight: 600 }}>
              {counter} pending {counter === 1 ? 'request' : 'requests'}
            </div>
          </div>
          {defaultHeader}
        </div>
      )}
    />
  );
}
Copy

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

const uiOverrides = {
  requestsModal: {
    component: (props) => (
      <RequestsModal
        {...props}
        backgroundColor="#0f172a"
        position="topRight"
        badgeProps={{
          style: {
            background: '#ef4444',
            borderRadius: '50%',
            padding: '4px 8px',
            fontWeight: 600,
          },
        }}
      />
    ),
  },
};

<MediasfuGeneric uiOverrides={uiOverrides} />;
Copy