MediaSFU ReactJS
    Preparing search index...

    Variable MainContainerComponentConst

    MainContainerComponent: React.FC<MainContainerComponentOptions> = ...

    MainContainerComponent is a React functional component that renders a responsive container with customizable dimensions, margins, and render hooks for advanced composition. The container's dimensions adapt to the window size based on provided width and height fractions, and it updates dynamically on window resize or orientation changes.

    Supports custom rendering of both the container and its content via renderContainer and renderContent, enabling complete control over layout, styling, and child composition.

    The properties for MainContainerComponent.

    Background color of the container.

    Child elements to render inside the container.

    Fraction of window width for container's width (0-1).

    Fraction of window height for container's height (0-1).

    Left margin of the container in pixels.

    Right margin of the container in pixels.

    Top margin of the container in pixels.

    Bottom margin of the container in pixels.

    Padding inside the container in pixels.

    Additional HTML props for the container div (className, style, etc.).

    Optional function to customize content rendering. Receives { defaultContent, dimensions }.

    Optional function to customize container rendering. Receives { defaultContainer, dimensions }.

    The rendered container component.

    Basic Usage

    import React from 'react';
    import { MainContainerComponent } from 'mediasfu-reactjs';

    function App() {
      return (
        <MainContainerComponent
          backgroundColor="black"
          containerWidthFraction={0.8}
          containerHeightFraction={0.9}
          marginLeft={10}
          marginTop={10}
          padding={20}
        >
          <h1>Main Content</h1>
          <p>This container adapts to window size.</p>
        </MainContainerComponent>
      );
    }

    Custom Content Wrapper (renderContent)

    import React from 'react';
    import { MainContainerComponent } from 'mediasfu-reactjs';

    function App() {
      return (
        <MainContainerComponent
          backgroundColor="white"
          containerWidthFraction={0.9}
          containerHeightFraction={0.85}
          renderContent={({ defaultContent, dimensions }) => (
            <div style={{ padding: 20, border: '2px solid blue' }}>
              <div style={{ marginBottom: 10 }}>
                Container: {dimensions.width}x{dimensions.height}px
              </div>
              {defaultContent}
            </div>
          )}
        >
          <p>Wrapped content with dimension display</p>
        </MainContainerComponent>
      );
    }

    Custom Container Builder (renderContainer)

    import React from 'react';
    import { MainContainerComponent } from 'mediasfu-reactjs';

    function App() {
      return (
        <MainContainerComponent
          backgroundColor="black"
          containerWidthFraction={0.7}
          containerHeightFraction={0.8}
          renderContainer={({ defaultContainer, dimensions }) => (
            <div style={{
              border: '4px solid gold',
              boxShadow: '0 8px 16px rgba(0,0,0,0.3)',
              borderRadius: 12
            }}>
              {defaultContainer}
              <div style={{
                position: 'absolute',
                bottom: 5,
                right: 5,
                color: 'yellow',
                fontSize: 10
              }}>
                {dimensions.width}x{dimensions.height}
              </div>
            </div>
          )}
        >
          <h2>Custom Container Shell</h2>
        </MainContainerComponent>
      );
    }

    Using in uiOverrides (MediasfuGeneric example)

    import React from 'react';
    import { MediasfuGeneric, MainContainerComponent } from 'mediasfu-reactjs';

    function App() {
      const CustomMainContainer = (props: any) => (
        <MainContainerComponent
          {...props}
          backgroundColor="darkblue"
          renderContainer={({ defaultContainer, dimensions }) => (
            <div style={{
              border: '3px dashed cyan',
              boxShadow: '0 0 20px cyan',
              position: 'relative'
            }}>
              {defaultContainer}
              <div style={{
                position: 'absolute',
                top: 5,
                left: 5,
                color: 'cyan',
                fontSize: 12,
                fontWeight: 'bold'
              }}>
                LIVE: {dimensions.width}x{dimensions.height}
              </div>
            </div>
          )}
        />
      );

      return (
        <MediasfuGeneric
          useLocalUIMode={true}
          useSeed={true}
          seedData={mySeedData}
          uiOverrides={{
            MainContainerComponent: CustomMainContainer
          }}
        />
      );
    }

    Advanced: Responsive Container with Media Queries

    import React, { useEffect, useState } from 'react';
    import { MainContainerComponent } from 'mediasfu-reactjs';

    function ResponsiveApp() {
      const [isMobile, setIsMobile] = useState(false);

      useEffect(() => {
        const updateMedia = () => setIsMobile(window.innerWidth < 768);
        updateMedia();
        window.addEventListener('resize', updateMedia);
        return () => window.removeEventListener('resize', updateMedia);
      }, []);

      return (
        <MainContainerComponent
          backgroundColor={isMobile ? 'navy' : 'black'}
          containerWidthFraction={isMobile ? 0.95 : 0.7}
          containerHeightFraction={isMobile ? 0.85 : 0.9}
          padding={isMobile ? 10 : 20}
          renderContent={({ defaultContent, dimensions }) => (
            <div>
              <div style={{ color: 'white', marginBottom: 10 }}>
                {isMobile ? 'Mobile' : 'Desktop'} Mode ({dimensions.width}x{dimensions.height}px)
              </div>
              {defaultContent}
            </div>
          )}
        >
          <h1>Responsive Content</h1>
          <p>This container adapts to mobile and desktop layouts.</p>
        </MainContainerComponent>
      );
    }

    Settings

    Member Visibility