Configuration options for the MainGridComponent.

MainGridComponentOptions

Content:

interface MainGridComponentOptions {
    children: ReactNode;
    backgroundColor: string;
    height: number;
    width: number;
    showAspect?: boolean;
    timeBackgroundColor?: string;
    showTimer?: boolean;
    meetingProgressTime: string;
    style?: object;
    renderContent?: ((options: {
        defaultContent: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
    renderContainer?: ((options: {
        defaultContainer: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
}

Properties

children: ReactNode

Child components to render inside the main grid (typically video/audio participant cards)

Dimensions:

backgroundColor: string

Background color for the grid container

height: number

Height of the grid container in pixels

Display Control:

width: number

Width of the grid container in pixels

showAspect?: boolean

Whether to show the grid container (false hides the entire grid)

Meeting Progress Timer:

timeBackgroundColor?: string

Background color for the timer overlay

Styling:

showTimer?: boolean

Whether to display the meeting progress timer overlay

meetingProgressTime: string

Time string to display on the timer (e.g., "12:34", "01:05:23")

style?: object

Additional custom styles to apply to the container

Advanced Render Overrides:

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

Optional custom renderer for grid content (receives defaultContent and dimensions)

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

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