Function MainContainerComponent

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.

Component

Example

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>
  );
}

Example

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>
  );
}

Example

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>
  );
}

Example

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
      }}
    />
  );
}

Example

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>
  );
}

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