Grid

The Grid component is a flexible, dynamic container that arranges content in a structured grid layout. It provides a mechanism for creating interactive grids where individual cells can be updated dynamically.

The Grid component must be used in tandem with the GridTile component, which allows for placement of content within specific grid cells.

Usage

The Grid component must be provided with number of rows and columns through the rows and cols props. You can dynamically add or remove items in specific cells using the provided methods.

import Grid from '@components/Layout/Grid/Grid';
import GridTile from '@components/Layout/GridTile/GridTile';
import Block from '@components/Layout/Block/Block';

const App = () => {
    return (
        <Grid cols={3} rows={3} >
            <GridTile row={2} col={2}><Block>Placed in row 2 column 2</Block></GridTile>
            <GridTile row={3} col={2}><Block>Placed in row 3 column 2</Block></GridTile>
            <GridTile row={3} col={3}><Block>Placed in row 3 column 3</Block></GridTile>
        </Grid>
    );
};

export default App;

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component
ref	BaseComponentRef	undefined	Retrieves the grid’s properties, methods and HTML element and assigns them to a local variable
rows	number	Required	The number of rows in the grid.
cols	number	Required	The number of columns in the grid.

Methods

Method	Parameters	Return Value	Description
addItem	row: number, col: number, item: JSX.Element	void	Adds the provided element to the specified row and column. Will throw an error if the row and column don’t exist. Will overwrite any existing items to the specified row and column.
removeItem	row: number, col: number	void	Removes the content of the specified cell. Will throw an error if the row and column don’t exist.

Guide

Dynamically Updating Grid Cells

The Grid component provides methods to dynamically add or remove items from specific grid cells. These methods can be accessed via the ref prop.

The steps to achieve it are as follows:

1. Declare a variable to hold the ref but don’t initialize it with a value
2. The declared value should have a type of GridRef, which you need to import
3. Set the declared variable as the value of the ref prop of the Grid component
4. Call the methods from the ref

Example

import Grid { GridRef } from '@components/Layout/Grid/Grid';
import GridTile from '@components/Layout/GridTile/GridTile';
import Block from '@components/Layout/Block/Block';

const App = () => {
    let gridRef!: GridRef;

    const addNewGridItem = () => {
        const newBlock = (<Block>New</Block>)
        gridRef.addItem(1, 1, newBlock);
    }

    const removeGridItem = () => {
        gridRef.removeItem(1, 1);
    }

    return (
        <Grid ref={gridRef} cols={3} rows={3} >
            <GridTile row={2} col={2}><Block>Placed in row 2 column 2</Block></GridTile>
            <GridTile row={3} col={2}><Block>Placed in row 3 column 2</Block></GridTile>
            <GridTile row={3} col={3}><Block>Placed in row 3 column 3</Block></GridTile>
        </Grid>
        <Block click={addNewGridItem}>Add Item</Block>
        <Block click={removeGridItem}>Remove Item</Block>
    );
};

export default App;