Interface MainScreenComponentOptions

Configuration options for the MainScreenComponent.

MainScreenComponentOptions

Content:

interface MainScreenComponentOptions {
    children: ReactNode;
    mainSize: number;
    doStack: boolean;
    containerWidthFraction?: number;
    containerHeightFraction?: number;
    updateComponentSizes: ((sizes: ComponentSizes) => void);
    defaultFraction?: number;
    showControls: boolean;
    componentSizes: ComponentSizes;
    style?: object;
    renderContent?: ((options: {
        defaultContent: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
    renderContainer?: ((options: {
        defaultContainer: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
}

Properties

children mainSize doStack containerWidthFraction? containerHeightFraction? updateComponentSizes defaultFraction? showControls componentSizes style? renderContent? renderContainer?

Properties

children

children: ReactNode

Child components (typically two: main content and secondary content)

Layout Configuration:

mainSize

mainSize: number

Percentage size of the main component when stacking (0-100, e.g., 70 means main takes 70% of space)

doStack

doStack: boolean

Whether to stack components (true = stack, false = side-by-side)

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)

updateComponentSizes

updateComponentSizes: ((sizes: ComponentSizes) => void)

Callback invoked when component sizes change (receives ComponentSizes)

Styling:

OptionaldefaultFraction

defaultFraction?: number

Height adjustment fraction when controls are shown

Control Bar Adjustment:

showControls

showControls: boolean

Whether control bar is visible (affects available height)

State Management:

componentSizes

componentSizes: ComponentSizes

Current calculated sizes for main and secondary components

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