InlineTextBlock

The InlineTextBlock component is used to create a text block element that can display all its children inline. It renders a p element with the cohinline attribute, allowing you to have text with images, for example, on a single line.

Installation

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

npx gameface-cli add InlineTextBlock

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

Usage

Using the InlineTextBlock component is straightforward. After importing it, you can include any child elements, such as text or images, inside the component.

index.tsx

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

<>
    <InlineTextBlock>
        Text with <img width="50" height="50" src="https://images.pexels.com/photos/7623316/pexels-photo-7623316.jpeg"/> image.
    </InlineTextBlock>
</>

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 inline text block.

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

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

    return (
        <InlineTextBlock ref={ref!}>
            Text with <img src="url"/> image.
        </InlineTextBlock>
    );
};

export default App;