ParticipantsModal - A React component that displays a modal for managing participants in an event.
import React from 'react';import { ParticipantsModal } from 'mediasfu-reactjs';import { io } from 'socket.io-client';const parameters = { coHostResponsibility: [{ name: "participants", value: true }], coHost: "John Doe", member: "Jane Smith", islevel: "2", participants: [{ id: "1", name: "Participant 1", muted: false, videoOn: true }], eventType: "meeting", socket: io("http://localhost:3000"), showAlert: (message) => console.log(message), roomName: "Room 1", updateIsMessagesModalVisible: (isVisible) => console.log("Messages modal:", isVisible), updateDirectMessageDetails: (participant) => console.log("Direct message details:", participant), updateStartDirectMessage: (start) => console.log("Direct message started:", start), updateParticipants: (participants) => console.log("Updated participants:", participants), getUpdatedAllParams: () => ({ filteredParticipants: [{ id: "1", name: "Participant 1", muted: false, videoOn: true }] }),};<ParticipantsModal isParticipantsModalVisible={true} onParticipantsClose={() => console.log("Participants modal closed")} onParticipantsFilterChange={(filter) => console.log("Filter:", filter)} participantsCounter={2} onMuteParticipants={muteParticipants} onMessageParticipants={messageParticipants} onRemoveParticipants={removeParticipants} RenderParticipantList={ParticipantList} RenderParticipantListOthers={ParticipantListOthers} position="topRight" backgroundColor="#83c0e9" parameters={parameters}/> Copy
import React from 'react';import { ParticipantsModal } from 'mediasfu-reactjs';import { io } from 'socket.io-client';const parameters = { coHostResponsibility: [{ name: "participants", value: true }], coHost: "John Doe", member: "Jane Smith", islevel: "2", participants: [{ id: "1", name: "Participant 1", muted: false, videoOn: true }], eventType: "meeting", socket: io("http://localhost:3000"), showAlert: (message) => console.log(message), roomName: "Room 1", updateIsMessagesModalVisible: (isVisible) => console.log("Messages modal:", isVisible), updateDirectMessageDetails: (participant) => console.log("Direct message details:", participant), updateStartDirectMessage: (start) => console.log("Direct message started:", start), updateParticipants: (participants) => console.log("Updated participants:", participants), getUpdatedAllParams: () => ({ filteredParticipants: [{ id: "1", name: "Participant 1", muted: false, videoOn: true }] }),};<ParticipantsModal isParticipantsModalVisible={true} onParticipantsClose={() => console.log("Participants modal closed")} onParticipantsFilterChange={(filter) => console.log("Filter:", filter)} participantsCounter={2} onMuteParticipants={muteParticipants} onMessageParticipants={messageParticipants} onRemoveParticipants={removeParticipants} RenderParticipantList={ParticipantList} RenderParticipantListOthers={ParticipantListOthers} position="topRight" backgroundColor="#83c0e9" parameters={parameters}/>
Properties for the ParticipantsModal component.
ParticipantsModal 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'
ParticipantsModal - A React component that displays a modal for managing participants in an event.
Example