WaitingRoomModal displays a modal interface for managing participants in a waiting room. It allows for accepting or rejecting participants and filtering the list in real time.
import { WaitingRoomModal } from 'mediasfu-reactjs';import { io } from 'socket.io-client';const waitingRoomList = [ { id: "1", name: "John Doe" }, { id: "2", name: "Jane Smith" },];const parameters = { filteredWaitingRoomList: waitingRoomList, getUpdatedAllParams: () => ({ filteredWaitingRoomList: waitingRoomList }),};const socket = io("http://localhost:3000");// Render the WaitingRoomModal<WaitingRoomModal isWaitingModalVisible={true} onWaitingRoomClose={() => console.log("Waiting room modal closed")} waitingRoomCounter={2} onWaitingRoomFilterChange={(text) => console.log("Filter changed to:", text)} waitingRoomList={waitingRoomList} updateWaitingList={(updatedList) => console.log("Updated waiting list:", updatedList)} roomName="Room 1" socket={socket} onWaitingRoomItemPress={(options) => console.log("Action taken on participant:", options)} position="topRight" backgroundColor="#83c0e9" parameters={parameters}/> Copy
import { WaitingRoomModal } from 'mediasfu-reactjs';import { io } from 'socket.io-client';const waitingRoomList = [ { id: "1", name: "John Doe" }, { id: "2", name: "Jane Smith" },];const parameters = { filteredWaitingRoomList: waitingRoomList, getUpdatedAllParams: () => ({ filteredWaitingRoomList: waitingRoomList }),};const socket = io("http://localhost:3000");// Render the WaitingRoomModal<WaitingRoomModal isWaitingModalVisible={true} onWaitingRoomClose={() => console.log("Waiting room modal closed")} waitingRoomCounter={2} onWaitingRoomFilterChange={(text) => console.log("Filter changed to:", text)} waitingRoomList={waitingRoomList} updateWaitingList={(updatedList) => console.log("Updated waiting list:", updatedList)} roomName="Room 1" socket={socket} onWaitingRoomItemPress={(options) => console.log("Action taken on participant:", options)} position="topRight" backgroundColor="#83c0e9" parameters={parameters}/>
The properties object.
The rendered waiting room modal component.
Optional
Ignored by React.
Only kept in types for backwards compatibility. Will be removed in a future major release.
Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.
Legacy React Docs
const MyComponent: FC = () => { return <div>Hello!</div>}MyComponent.displayName = 'MyAwesomeComponent' Copy
const MyComponent: FC = () => { return <div>Hello!</div>}MyComponent.displayName = 'MyAwesomeComponent'
WaitingRoomModal displays a modal interface for managing participants in a waiting room. It allows for accepting or rejecting participants and filtering the list in real time.
Component
Example