Interface FlexibleGridOptions

Interface defining the props for the FlexibleGrid component.

FlexibleGrid provides a dynamic grid layout for displaying multiple components with customizable dimensions and aspect ratios.

FlexibleGridOptions

Grid Configuration:

interface FlexibleGridOptions {
    customWidth: number;
    customHeight: number;
    rows: number;
    columns: number;
    componentsToRender: ReactNode[];
    showAspect?: boolean;
    backgroundColor?: string;
    style?: object;
    renderContent?: ((options: {
        defaultContent: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
    renderContainer?: ((options: {
        defaultContainer: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
}

Properties

customWidth customHeight rows columns componentsToRender showAspect? backgroundColor? style? renderContent? renderContainer?

Properties

customWidth

customWidth: number

Width for each grid cell (in pixels)

customHeight

customHeight: number

Height for each grid cell (in pixels)

Display Options:

rows

rows: number

Number of rows in the grid layout

columns

columns: number

Number of columns in the grid layout

componentsToRender

componentsToRender: ReactNode[]

Array of components to display in grid cells

Cell Dimensions:

OptionalshowAspect

showAspect?: boolean

Whether to maintain aspect ratio for grid cells

OptionalbackgroundColor

backgroundColor?: string

Background color for each grid cell

Styling:

Optionalstyle

style?: object

Custom styles for the grid container

Advanced Render Overrides:

OptionalrenderContent

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

Function to wrap or replace the default grid content

OptionalrenderContainer

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

Function to wrap or replace the entire grid container

Settings

Member Visibility

On This Page

Properties