Variable WaitingRoomModal`Const`

WaitingRoomModal: React.FC<WaitingRoomModalOptions> = ...

WaitingRoomModal equips hosts with a moderated queue for admitting participants. It pairs search filtering with accept/deny actions, leverages socket callbacks for real-time updates, and exposes render overrides for teams that need bespoke waiting room experiences.

Key Features

Real-time counter badge that mirrors the filtered waiting list length.
Search input for quickly locating specific participants.
Accept/deny actions wired to respondToWaiting by default.
Supports corner anchoring and surface color customization.
Allows override of both container and internal content via render props.
Integrates parameters.getUpdatedAllParams for up-to-date queue state.

Accessibility

Close button carries assistive labels for screen readers.
List items remain accessible thanks to Pressable wrappers within custom renderers.

Param: props

Modal configuration options.

Returns

Rendered waiting room management modal.

Example: Basic host usage with default handlers.

<WaitingRoomModal
  isWaitingModalVisible={visible}
  onWaitingRoomClose={handleClose}
  waitingRoomCounter={waitingList.length}
  onWaitingRoomFilterChange={setFilter}
  waitingRoomList={waitingList}
  updateWaitingList={setWaitingList}
  roomName={roomId}
  socket={socket}
  parameters={{
    getUpdatedAllParams: () => ({ filteredWaitingRoomList: filteredList })
  }}
/>

Example: Custom accept/deny handler and dark theme styling.

<WaitingRoomModal
  isWaitingModalVisible
  onWaitingRoomClose={dismiss}
  waitingRoomCounter={pending.length}
  onWaitingRoomFilterChange={setQuery}
  waitingRoomList={pending}
  updateWaitingList={setPending}
  roomName="StageA"
  socket={socket}
  onWaitingRoomItemPress={handleWaitingDecision}
  backgroundColor="#141927"
  style={{ borderRadius: 20 }}
  parameters={{
    getUpdatedAllParams: () => ({ filteredWaitingRoomList: filteredPending })
  }}
/>

Example: Integrating a custom container animation.

<WaitingRoomModal
  {...baseProps}
  renderContainer={({ defaultContainer }) => (
    <SlideIn>{defaultContainer}</SlideIn>
  )}
/>

Variable WaitingRoomModal`Const`

Key Features

Accessibility

Param: props

Returns

Example: Basic host usage with default handlers.

Example: Custom accept/deny handler and dark theme styling.

Example: Integrating a custom container animation.

Settings

On This Page

Variable WaitingRoomModalConst

Key Features

Accessibility

Param: props

Returns

Example: Basic host usage with default handlers.

Example: Custom accept/deny handler and dark theme styling.

Example: Integrating a custom container animation.

Settings

On This Page

Variable WaitingRoomModal`Const`