MediaSFU ReactJS
    Preparing search index...

    Variable BreakoutRoomsModalConst

    BreakoutRoomsModal: React.FC<BreakoutRoomsModalOptions> = ...

    BreakoutRoomsModal - Comprehensive breakout room management interface

    A feature-rich modal for creating, configuring, and managing breakout rooms during meetings. Supports random/manual participant assignment, real-time room editing, start/stop controls, and participant movement. Perfect for facilitating small-group discussions, workshops, and collaborative activities within larger meetings.

    Features:

    • Create multiple breakout rooms
    • Random participant assignment across rooms
    • Manual participant assignment with drag-and-drop
    • Add/remove rooms dynamically
    • Edit room participants on-the-fly
    • Start/stop breakout sessions
    • Update active breakout configurations
    • Participant visibility in each room
    • Real-time socket synchronization
    • Extensive HTML attributes customization for all UI elements
    • Custom render hooks for complete UI flexibility

    Configuration options

    Modal visibility state

    Callback when modal is closed

    Breakout room parameters

    All meeting participants

    Alert display function

    Socket.io client instance

    Local socket for internal communication

    Pagination limit

    Current display mode

    Previous display mode

    Meeting/room identifier

    Screen share active state

    Content sharing state

    Breakout session active

    Breakout session ended

    Modal visibility state

    Currently selected room index

    Permission to start breakout

    Room configurations

    Update session state

    Update ended state

    Update selected room

    Update start permission

    Update room configurations

    Update display mode

    Retrieve latest parameters

    Modal screen position

    Modal background color

    Custom modal title

    HTML attributes for overlay div

    HTML attributes for content container

    HTML attributes for header section

    HTML attributes for title element

    HTML attributes for close button

    Custom close icon

    HTML attributes for header divider

    HTML attributes for body section

    HTML attributes for controls wrapper

    HTML attributes for room count field

    HTML attributes for room count label

    HTML attributes for room count input

    HTML attributes for actions wrapper

    HTML attributes for random button

    HTML attributes for manual button

    HTML attributes for add room button

    HTML attributes for save button

    HTML attributes for participant field

    HTML attributes for participant label

    HTML attributes for participant select

    HTML attributes for rooms container

    HTML attributes for start button

    HTML attributes for stop button

    Custom label for room count

    Custom label for participant action

    Custom label for random button

    Custom label for manual button

    Custom label for add button

    Custom label for save button

    Custom label for start button

    Custom label for update button

    Custom label for stop button

    Custom header renderer

    Custom controls renderer

    Custom room list renderer

    Custom start button renderer

    Custom stop button renderer

    Custom body renderer

    Custom content renderer

    Rendered breakout rooms modal

    // Basic breakout rooms management

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

    function BreakoutControl({ parameters }) {
      const [isVisible, setIsVisible] = useState(false);

      return (
        <>
          <button onClick={() => setIsVisible(true)}>
            Breakout Rooms ({parameters.breakoutRooms.length})
          </button>
          <BreakoutRoomsModal
            isVisible={isVisible}
            onBreakoutRoomsClose={() => setIsVisible(false)}
            parameters={parameters}
            position="topRight"
            backgroundColor="#0f172a"
          />
        </>
      );
    }

    // Custom styled with room count display

    import { BreakoutRoomsModal } from 'mediasfu-reactjs';

    function BrandedBreakout({ isVisible, onClose, parameters }) {
      const totalParticipantsInRooms = parameters.breakoutRooms.reduce(
        (sum, room) => sum + room.length,
        0
      );

      return (
        <BreakoutRoomsModal
          isVisible={isVisible}
          onBreakoutRoomsClose={onClose}
          parameters={parameters}
          backgroundColor="#1e3a8a"
          position="topLeft"
          contentProps={{
            style: {
              maxHeight: '90vh',
              borderRadius: 20,
              border: '2px solid #3b82f6',
            },
          }}
          startButtonProps={{
            style: {
              background: 'linear-gradient(135deg, #22c55e 0%, #14532d 100%)',
              color: 'white',
              padding: '12px 28px',
              borderRadius: 12,
              fontWeight: 600,
            },
          }}
          title={
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span>Breakout Rooms</span>
              <span style={{ fontSize: 14, fontWeight: 400 }}>
                ({totalParticipantsInRooms}/{parameters.participants.length} assigned)
              </span>
            </div>
          }
        />
      );
    }

    // Analytics tracking for breakout operations

    import { BreakoutRoomsModal } from 'mediasfu-reactjs';

    function AnalyticsBreakout({ isVisible, onClose, parameters }) {
      return (
        <BreakoutRoomsModal
          isVisible={isVisible}
          onBreakoutRoomsClose={onClose}
          parameters={{
            ...parameters,
            updateBreakOutRoomStarted: (started) => {
              analytics.track('breakout_session_started', {
                roomCount: parameters.breakoutRooms.length,
                participantCount: parameters.participants.length,
              });
              parameters.updateBreakOutRoomStarted(started);
            },
            updateBreakOutRoomEnded: (ended) => {
              analytics.track('breakout_session_ended', {
                duration: Date.now() - sessionStartTime,
              });
              parameters.updateBreakOutRoomEnded(ended);
            },
          }}
          renderRoomList={({ defaultRoomList, rooms }) => {
            return (
              <div>
                <div style={{
                  padding: 12,
                  background: '#f8fafc',
                  borderRadius: 8,
                  marginBottom: 16,
                }}>
                  <div style={{ fontWeight: 600 }}>
                    {rooms.length} rooms configured
                  </div>
                  <div style={{ fontSize: 14, marginTop: 4 }}>
                    Avg: {Math.round(
                      rooms.reduce((sum, r) => sum + r.length, 0) / rooms.length
                    )} participants per room
                  </div>
                </div>
                {defaultRoomList}
              </div>
            );
          }}
        />
      );
    }

    // Override with MediasfuGeneric uiOverrides

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

    const uiOverrides = {
      breakoutRoomsModal: {
        component: (props) => (
          <BreakoutRoomsModal
            {...props}
            backgroundColor="#0f172a"
            position="topRight"
            startButtonProps={{
              style: {
                background: '#22c55e',
                borderRadius: 12,
                padding: '12px 28px',
                fontWeight: 600,
              },
            }}
            stopButtonProps={{
              style: {
                background: '#ef4444',
                borderRadius: 12,
                padding: '12px 28px',
                fontWeight: 600,
              },
            }}
          />
        ),
      },
    };

    <MediasfuGeneric uiOverrides={uiOverrides} />;

    Settings

    Member Visibility