Block

The Block component is a structural element designed to act as an element container. The Block component is meant to be used as a wrapper of your other components for logical or styling purposes.

Installation

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

npx gameface-cli add Block

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

Usage

The default use case for the Block component is as an element container.

index.tsx

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

<Block>
    Block Content
</Block>

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.
width	string	undefined	Sets the size of the component.
height	string	undefined	Sets the size of the component.
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

Accessing the HTML element

To access the HTML DOM element of the Block 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 Block component

Example

import Bottom from '@components/Layout/Bottom/Bottom';
import Block from '@components/Layout/Block/Block';

const App = () => {
    let blockRef!: HTMLDivElement

    return (
        <Block ref={blockRef}>
            <Bottom>Bottom Section</Bottom>
        </Block>
    );
};

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