Function CoHostModal

CoHostModal component allows managing co-host settings for an event.

This component displays a modal that enables users to select a new co-host from the list of participants, assign responsibilities, and save the updated settings. Real-time communication is facilitated using a Socket instance, and it includes customizable options for modal appearance and position.

Component

Example

import React from 'react';
import { CoHostModal } from 'mediasfu-reactjs';
import { io } from 'socket.io-client';

function App() {
  const isCoHostModalVisible = true;
  const onCoHostClose = () => console.log('Co-host modal closed');
  const onModifyEventSettings = (settings) => console.log('Settings modified', settings);
  const currentCohost = 'John Doe';
  const participants = [
    { name: 'John Doe', islevel: '1' },
    { name: 'Jane Doe', islevel: '0' }
  ];
  const coHostResponsibility = [
    { name: 'manageParticipants', value: true, dedicated: false }
  ];
  const position = 'topRight';
  const backgroundColor = '#83c0e9';
  const roomName = 'Room 1';
  const showAlert = ({ message, type }) => console.log('Alert:', message, type);
  const updateCoHostResponsibility = (responsibilities) => console.log('Co-host responsibilities updated', responsibilities);
  const updateCoHost = (coHost) => console.log('Co-host updated', coHost);
  const updateIsCoHostModalVisible = (visible) => console.log('Co-host modal visibility:', visible);
  const socket = io('http://localhost:3000');

  return (
    <CoHostModal
      isCoHostModalVisible={isCoHostModalVisible}
      onCoHostClose={onCoHostClose}
      onModifyEventSettings={onModifyEventSettings}
      currentCohost={currentCohost}
      participants={participants}
      coHostResponsibility={coHostResponsibility}
      position={position}
      backgroundColor={backgroundColor}
      roomName={roomName}
      showAlert={showAlert}
      updateCoHostResponsibility={updateCoHostResponsibility}
      updateCoHost={updateCoHost}
      updateIsCoHostModalVisible={updateIsCoHostModalVisible}
      socket={socket}
    />
  );
}

export default App;

Properties

propTypes? displayName?

Properties

OptionalpropTypes

propTypes?: any

Ignored by React.

Deprecated

Only kept in types for backwards compatibility. Will be removed in a future major release.

OptionaldisplayName

displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

See

Legacy React Docs

Example


const MyComponent: FC = () => {
  return <div>Hello!</div>
}

MyComponent.displayName = 'MyAwesomeComponent'

Settings

Member Visibility

On This Page

Properties