Interface MainAspectComponentOptions

Configuration options for the MainAspectComponent.

MainAspectComponentOptions

Content:

interface MainAspectComponentOptions {
    backgroundColor?: string;
    children: ReactNode;
    showControls?: boolean;
    containerWidthFraction?: number;
    containerHeightFraction?: number;
    defaultFraction?: number;
    updateIsWideScreen: ((isWide: boolean) => void);
    updateIsMediumScreen: ((isMedium: boolean) => void);
    updateIsSmallScreen: ((isSmall: boolean) => void);
    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 showControls? containerWidthFraction? containerHeightFraction? defaultFraction? updateIsWideScreen updateIsMediumScreen updateIsSmallScreen style? renderContent? renderContainer?

Properties

OptionalbackgroundColor

backgroundColor?: string

Background color for the aspect container

children

children: ReactNode

Child components to render inside the aspect container

Dimensions (Responsive):

OptionalshowControls

showControls?: boolean

Whether control bar is visible (adjusts available height using defaultFraction)

Screen Size Callbacks:

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)

OptionaldefaultFraction

defaultFraction?: number

Height adjustment fraction when controls are shown (applies to height calculation)

Control Bar Adjustment:

updateIsWideScreen

updateIsWideScreen: ((isWide: boolean) => void)

Callback invoked when wide screen state changes (width >= 768px)

updateIsMediumScreen

updateIsMediumScreen: ((isMedium: boolean) => void)

Callback invoked when medium screen state changes (576px <= width < 768px)

updateIsSmallScreen

updateIsSmallScreen: ((isSmall: boolean) => void)

Callback invoked when small screen state changes (width < 576px)

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