MainScreenComponent is a React functional component that dynamically adjusts the layout and dimensions of its child components based on props and the window size.
import React from 'react';import { MainScreenComponent } from 'mediasfu-reactjs';function App() { return ( <MainScreenComponent mainSize={70} doStack={true} containerWidthFraction={0.5} containerHeightFraction={0.5} updateComponentSizes={(sizes) => console.log('Component sizes:', sizes)} defaultFraction={0.9} showControls={true} componentSizes={{ mainHeight: 100, otherHeight: 100, mainWidth: 100, otherWidth: 100 }} > <ChildComponent /> </MainScreenComponent> );}export default App; Copy
import React from 'react';import { MainScreenComponent } from 'mediasfu-reactjs';function App() { return ( <MainScreenComponent mainSize={70} doStack={true} containerWidthFraction={0.5} containerHeightFraction={0.5} updateComponentSizes={(sizes) => console.log('Component sizes:', sizes)} defaultFraction={0.9} showControls={true} componentSizes={{ mainHeight: 100, otherHeight: 100, mainWidth: 100, otherWidth: 100 }} > <ChildComponent /> </MainScreenComponent> );}export default App;
The properties for MainScreenComponent.
The rendered main screen 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'
MainScreenComponent is a React functional component that dynamically adjusts the layout and dimensions of its child components based on props and the window size.
Component
Example