TextBlock

The TextBlock component is used to render text. Internally, it simply outputs an HTML p element containing the text.

Installation

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

npx gameface-cli add TextBlock

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

Usage

Using the TextBlock component is simple. After importing it, you can add text as a child element.

index.tsx

import TextBlock from '@components/Basic/TextBlock/TextBlock';

<>
    <TextBlock>
        Text content.
    </TextBlock>
</>

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Styles applied directly to the root element of the component..
class	string	""	Additional CSS classes to apply to the component.
ref	HTMLButtonElement | undefined	undefined	Obtains the component’s DOM element and assigns it to a variable, allowing direct access to the HTML element via the ref object.
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, the component’s actions will execute. Can be a CSS selector or HTMLElement.

Guide

Accessing the HTML element

To access the HTML element of the component and make modifications, you can add a ref property to the text block.

import TextBlock from '@components/Basic/TextBlock/TextBlock';

const App = () => {
    let ref: HTMLParagraphElement;

    return (
        <TextBlock ref={ref!}>
            Text content.
        </TextBlock>
    );
};

export default App;