MenuModal component displays a modal with various options and buttons.
import React from 'react';import { MenuModal } from 'mediasfu-reactjs';import { faSpinner } from '@fortawesome/free-solid-svg-icons';const customButtons = [ { action: () => console.log("Button 1 clicked"), show: true, backgroundColor: "blue", disabled: false, icon: faSpinner, iconStyle: { color: "white" }, text: "Button 1", textStyle: { color: "white" }, }, { action: () => console.log("Button 2 clicked"), show: true, backgroundColor: "red", disabled: false, icon: faSpinner, iconStyle: { color: "white" }, text: "Button 2", textStyle: { color: "white" }, },];const App = () => ( <MenuModal backgroundColor="#83c0e9" isVisible={true} onClose={() => console.log("Modal closed")} customButtons={customButtons} shareButtons={true} position="bottomRight" roomName="1234567890" adminPasscode="1234" islevel="2" eventType="meeting" localLink="http://localhost:3000" />);export default App; Copy
import React from 'react';import { MenuModal } from 'mediasfu-reactjs';import { faSpinner } from '@fortawesome/free-solid-svg-icons';const customButtons = [ { action: () => console.log("Button 1 clicked"), show: true, backgroundColor: "blue", disabled: false, icon: faSpinner, iconStyle: { color: "white" }, text: "Button 1", textStyle: { color: "white" }, }, { action: () => console.log("Button 2 clicked"), show: true, backgroundColor: "red", disabled: false, icon: faSpinner, iconStyle: { color: "white" }, text: "Button 2", textStyle: { color: "white" }, },];const App = () => ( <MenuModal backgroundColor="#83c0e9" isVisible={true} onClose={() => console.log("Modal closed")} customButtons={customButtons} shareButtons={true} position="bottomRight" roomName="1234567890" adminPasscode="1234" islevel="2" eventType="meeting" localLink="http://localhost:3000" />);export default App;
The rendered MenuModal 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'
MenuModal component displays a modal with various options and buttons.
Component
Example