Row

The Row component is a structural wrapper designed to be used to define a row in the layout where Column components will be used. It uses a flexbox-based layout system to create responsive rows of content.

Installation

Every component ships with the boilerplate. If you are working in your own project, add Row with the Gameface CLI:

npx gameface-cli add Row

The CLI pulls in whatever Row depends on. To refresh an existing copy, update it instead.

Usage

The primary use case for the Row component is as a container for Column components, enabling the creation of grid-like structures.

index.tsx

import Row from '@components/Layout/Row/Row';
import { Column2, Column10, Column12 } from '@components/Layout/Column/Column';

<>
    <Row>
        <Column2>I take 2/12 of the row</Column2>
        <Column10>I take 10/12 of the row</Column10>
    </Row>
    <Row>
        <Column12>I take the full row</Column12>
    </Row>
</>

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	HTMLDivElement	undefined	Retrieves the component’s DOM element and assigns it to a variable.
onAction	Record<string, (scope?: string, ...args: any[]) => void>	undefined	Allows you to add custom navigation action handlers to the component. See the Navigation component documentation for details.
anchor	string | HTMLElement	undefined	Links navigation to another element. When the anchor element is focused, this component’s actions will execute. Can be a CSS selector or HTMLElement.

Guide

Creating a Grid Layout

The Row component is designed to work seamlessly with Column components, where the Row acts as a horizontal container and the Columns define their widths. This makes it easy to create grid-like layouts for various use cases such as cards, forms, or responsive layouts.

Example

import Row from '@components/Layout/Row/Row';
import { Column2, Column10, Column12 } from '@components/Layout/Column/Column'

const App = () => {
    return (
        <Row>
            <Column2>I take 2/12 of the row</Column2>
            <Column10>I take 10/12 of the row</Column10>
        </Row>
        <Row>
            <Column12>I take the full row</Column12>
        </Row>
    );
};

export default App;

Accessing the HTML element

To access the HTML DOM element of the Row component.

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 HTMLDivElement.
3. Set the declared variable as the value of the ref prop of the Row component

Example

import Row from '@components/Layout/Row/Row';
import { Column } from '@components/Layout/Column/Column'

const App = () => {
    let rowRef!: HTMLDivElement;

    return (
        <Row ref={rowRef}>
            <Column>I take 2/12 of the row</Column>
        </Row>
    );
};

export default App;

Now you can access the HTML element of Row with rowRef and make modifications to it if needed.