MediaSFU ReactJS
    Preparing search index...

    Variable ConfirmExitModalConst

    ConfirmExitModal: React.FC<ConfirmExitModalOptions> = ...

    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

    Configuration options

    Modal visibility state

    Callback when modal is closed

    Modal screen position

    Modal background color

    Exit confirmation handler

    Current user member ID

    Ban state flag

    Meeting/room identifier

    Socket.io client instance

    User permission level ('2'=host)

    Custom modal title

    Custom confirm button label

    Custom cancel button label

    Custom message or message renderer

    HTML attributes for overlay

    HTML attributes for content container

    HTML attributes for header

    HTML attributes for title

    HTML attributes for close button

    Custom close icon

    HTML attributes for header divider

    HTML attributes for body

    HTML attributes for message paragraph

    HTML attributes for footer

    HTML attributes for cancel button

    HTML attributes for confirm button

    HTML attributes for body divider

    Custom header renderer

    Custom body renderer

    Custom footer renderer

    Custom header divider renderer

    Custom body divider renderer

    Custom message renderer

    Custom content renderer

    Rendered confirmation modal

    // Basic exit confirmation for participant

    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"
          />
        </>
      );
    }

    // Custom styled with role-specific messaging

    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?'
          }
        />
      );
    }

    // Analytics tracking for exit actions

    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>
          )}
        />
      );
    }

    // Override with MediasfuGeneric uiOverrides

    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} />;

    Settings

    Member Visibility