Overview

The <T> component is the primary translation method in gt-react.

<T id="example"> // [!code highlight]
    Today, I went to
    {" the shop"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T> 

The <T> component supports translating plain text as well as complex JSX structures. It also provides features for handling variables, plurals, and context-specific translations.

Reference

Props

Descriptions

Returns

React.JSX.Element | undefined containing the rendered translation or fallback content, depending on the provided configuration.

Behaviour

Production

During the CD process, any children inside a <T> will be translated before your application is deployed. This ensures fast load times for all locales, but it can only translate content known at build time.

Once generated, translations are either (1) stored in the CDN or (2) included in your app’s build output, according to your configuration. From there, the translated content is served to your users. If a translation is not found, it will fall back to the original content.

Make sure to follow the deployment guide here.

Development

During development, the <T> function will translate content on demand. This is useful for prototyping how your app will look in different languages. Remember to add a Dev API key to your environment to enable this behaviour.

While loading, <T> will return undefined unless the languages are similar (en-US vs en-GB), though this behaviour can be customised with render settings. If an error occurs, <T> will return the original content.

You may see a delay during on-demand translation in development. This delay won’t occur in production builds, as everything will already be translated.

Examples

Basic usage

The <T> component can translate simple strings using an id and its children. Remember, the <T> component must be used inside a <GTProvider> to access the translations.

import { T } from 'gt-react';

export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Hello, world!
        </T> 
    );
}

With variables

The <T> component can include variables for dynamic content within translations.

import { T, Var } from 'gt-react';

export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Hello, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}

With plurals

The <T> component also supports pluralisation via the <Plural> component.

import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  
                singular={<>You have 1 item.</>}  
                plural={<>You have {count} items.</>}  
            />  // [!code highlight]
        </T>
    );
}

Limitations

The <T> component does not translate dynamic content.

import { T } from 'gt-react';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // will create an error // [!code highlight]
        </T>
    );
}

The <T> function translates its children.

import { T } from 'gt-react';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <T>
            <div><b>This is valid!</b></div> // will be translated // [!code highlight]

            <ValidTranslation> // will be translated // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <InvalidTranslation /> // will not be translated
        </T>
    );
}

Notes

• The <T> component is designed for translating content in your application. It is the primary method for localisation in gt-react.
• Use the <T> component to translate plain text or JSX structures, including variables and pluralisation.
• Ensure the <T> component is wrapped in a <GTProvider> to access the translation context.

Next steps

• Explore more advanced features such as on‑demand translation, variables, context, and pluralisation; see the <T> Design Patterns documentation.
• To translate strings, see useGT.