Interface MainContainerComponentOptions

Configuration options for the MainContainerComponent.

MainContainerComponentOptions

Content:

interface MainContainerComponentOptions {
    backgroundColor?: string;
    children: ReactNode;
    containerWidthFraction?: number;
    containerHeightFraction?: number;
    marginLeft?: number;
    marginRight?: number;
    marginTop?: number;
    marginBottom?: number;
    padding?: number;
    style?: object;
    renderContent?: ((options: {
        defaultContent: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
    renderContainer?: ((options: {
        defaultContainer: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
}

Properties

backgroundColor? children containerWidthFraction? containerHeightFraction? marginLeft? marginRight? marginTop? marginBottom? padding? style? renderContent? renderContainer?

Properties

OptionalbackgroundColor

backgroundColor?: string

Background color for the container

children

children: ReactNode

Child elements to render inside the container

Dimensions (Responsive):

OptionalcontainerWidthFraction

containerWidthFraction?: number

Fraction of window width to use (0.0 to 1.0)

OptionalcontainerHeightFraction

containerHeightFraction?: number

Fraction of window height to use (0.0 to 1.0)

Spacing:

OptionalmarginLeft

marginLeft?: number

Left margin in pixels

OptionalmarginRight

marginRight?: number

Right margin in pixels

OptionalmarginTop

marginTop?: number

Top margin in pixels

OptionalmarginBottom

marginBottom?: number

Bottom margin in pixels

Optionalpadding

padding?: number

Internal padding in pixels

Styling:

Optionalstyle

style?: object

Additional custom styles to apply to the container

Advanced Render Overrides:

OptionalrenderContent

renderContent?: ((options: {
    defaultContent: ReactNode;
    dimensions: {
        width: number;
        height: number;
    };
}) => ReactNode)

Optional custom renderer for content (receives defaultContent and dimensions)

OptionalrenderContainer

renderContainer?: ((options: {
    defaultContainer: ReactNode;
    dimensions: {
        width: number;
        height: number;
    };
}) => ReactNode)

Optional custom renderer for outer container (receives defaultContainer and dimensions)

Settings

Member Visibility

On This Page

Properties