EventSettingsModal component provides a modal interface for modifying event settings.
Copy
import React, { useState } from 'react'; import { EventSettingsModal } from 'mediasfu-reactjs';
const App = () => { const [modalVisible, setModalVisible] = useState(true); const handleCloseModal = () => setModalVisible(false);
const parameters = { audioSetting: "allow", videoSetting: "disallow", screenshareSetting: "approval", chatSetting: "disallow", };
return ( <EventSettingsModal isEventSettingsModalVisible={modalVisible} onEventSettingsClose={handleCloseModal} onModifyEventSettings={(options) => console.log("Settings modified", options)} audioSetting={parameters.audioSetting} videoSetting={parameters.videoSetting} screenshareSetting={parameters.screenshareSetting} chatSetting={parameters.chatSetting} updateAudioSetting={(setting) => console.log("Audio setting updated", setting)} updateVideoSetting={(setting) => console.log("Video setting updated", setting)} updateScreenshareSetting={(setting) => console.log("Screenshare setting updated", setting)} updateChatSetting={(setting) => console.log("Chat setting updated", setting)} updateIsSettingsModalVisible={(isVisible) => setModalVisible(isVisible)} position="topRight" backgroundColor="#83c0e9" /> ); };
export default App;
The properties object.
The rendered EventSettingsModal 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'
EventSettingsModal component provides a modal interface for modifying event settings.
Component
Example
import React, { useState } from 'react'; import { EventSettingsModal } from 'mediasfu-reactjs';
const App = () => { const [modalVisible, setModalVisible] = useState(true); const handleCloseModal = () => setModalVisible(false);
const parameters = { audioSetting: "allow", videoSetting: "disallow", screenshareSetting: "approval", chatSetting: "disallow", };
return ( <EventSettingsModal isEventSettingsModalVisible={modalVisible} onEventSettingsClose={handleCloseModal} onModifyEventSettings={(options) => console.log("Settings modified", options)} audioSetting={parameters.audioSetting} videoSetting={parameters.videoSetting} screenshareSetting={parameters.screenshareSetting} chatSetting={parameters.chatSetting} updateAudioSetting={(setting) => console.log("Audio setting updated", setting)} updateVideoSetting={(setting) => console.log("Video setting updated", setting)} updateScreenshareSetting={(setting) => console.log("Screenshare setting updated", setting)} updateChatSetting={(setting) => console.log("Chat setting updated", setting)} updateIsSettingsModalVisible={(isVisible) => setModalVisible(isVisible)} position="topRight" backgroundColor="#83c0e9" /> ); };
export default App;