Function ConfirmExitModal

ConfirmExitModal - Confirmation dialog for leaving or ending meetings

A critical confirmation modal that appears before a user exits a meeting or before a host ends a meeting for all participants. Provides clear messaging differentiated by user role and supports ban scenarios. Essential for preventing accidental meeting exits/terminations.

Features:

• Role-specific confirmation messages (host vs participant)
• Differentiated wording for exit vs end meeting
• Ban scenario handling
• Customizable messages and labels
• Confirm/cancel action buttons
• Extensive HTML attributes customization
• Custom render hooks for all sections
• Responsive positioning
• Socket-based exit handling

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

function ExitConfirmation({ member, roomName, socket, islevel }) {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <>
      <button onClick={() => setIsVisible(true)}>
        Leave Meeting
      </button>
      <ConfirmExitModal
        isConfirmExitModalVisible={isVisible}
        onConfirmExitClose={() => setIsVisible(false)}
        member={member}
        roomName={roomName}
        socket={socket}
        islevel={islevel}
        position="topRight"
        backgroundColor="#0f172a"
      />
    </>
  );
}
Copy

import { ConfirmExitModal } from 'mediasfu-reactjs';

function BrandedExitConfirm(props) {
  const isHost = props.islevel === '2';

  return (
    <ConfirmExitModal
      {...props}
      backgroundColor="#1e3a8a"
      contentProps={{
        style: {
          borderRadius: 20,
          border: `2px solid ${isHost ? '#ef4444' : '#3b82f6'}`,
        },
      }}
      confirmButtonProps={{
        style: {
          background: isHost
            ? 'linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)'
            : 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)',
          color: 'white',
          padding: '12px 28px',
          borderRadius: 12,
          fontWeight: 600,
        },
      }}
      cancelButtonProps={{
        style: {
          background: '#6b7280',
          color: 'white',
          padding: '12px 28px',
          borderRadius: 12,
          fontWeight: 600,
        },
      }}
      message={({ islevel }) =>
        islevel === '2'
          ? 'Are you sure you want to end the meeting for everyone?'
          : 'Are you sure you want to leave this meeting?'
      }
    />
  );
}
Copy

import { ConfirmExitModal } from 'mediasfu-reactjs';

function AnalyticsExitConfirm(props) {
  const handleExitConfirm = async (options) => {
    analytics.track('meeting_exit_confirmed', {
      userRole: props.islevel === '2' ? 'host' : 'participant',
      meetingId: props.roomName,
      banned: props.ban || false,
    });
    return props.exitEventOnConfirm?.(options);
  };

  return (
    <ConfirmExitModal
      {...props}
      exitEventOnConfirm={handleExitConfirm}
      renderFooter={({ defaultFooter, onCancel, onConfirm }) => (
        <div>
          <div style={{
            padding: 12,
            background: '#fef3c7',
            borderRadius: 8,
            marginBottom: 16,
            fontSize: 14,
          }}>
            {props.islevel === '2'
              ? '⚠️ This will end the meeting for all participants'
              : 'You can rejoin anytime'}
          </div>
          {defaultFooter}
        </div>
      )}
    />
  );
}
Copy

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

const uiOverrides = {
  confirmExitModal: {
    component: (props) => (
      <ConfirmExitModal
        {...props}
        backgroundColor="#0f172a"
        position="topRight"
        confirmButtonProps={{
          style: {
            background: '#ef4444',
            borderRadius: 12,
            padding: '12px 28px',
            fontWeight: 600,
          },
        }}
      />
    ),
  },
};

<MediasfuGeneric uiOverrides={uiOverrides} />;
Copy