<T>

Overview

The <T> component is the main translation method in gt-next.

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

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

Reference

Props

Descriptions

Returns

React.JSX.Element|undefined which contains the rendered translation or fallback content based on the provided configuration.

Behavior

Production

During the CD process, any children inside of 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) stored 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 fallback to the originial 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 what your app will look like in different languages. Remember to add a Dev API key to your environment to enable this behavior.

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

You will see a delay during on-demand translation in development. This delay will not occur during for production builds unless content is explicitly being translated on demand, i.e., by using <Tx> or tx().

Examples

Basic usage

The <T> will translate its children.

import { T } from 'gt-next';

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

With variables

You can use the <Var> component to mark children as variables. This allows you to mark content that should not be translated. Usually, <Var> components wrap dynamic content.

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

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

With plurals

The <T> component also supports pluralization using the <Plural> component.

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

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

Limitations

The <T> component does not translate content that is dynamic.

import { T } from 'gt-next';

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

The <T> function translates its descendants.

import { T } from 'gt-next';

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 localization in gt-next.
• Use the <T> component to translate plain text or JSX structures, including variables and pluralization.
• If you use the <T> component on the client side, make sure it is wrapped in a <GTProvider> to access the translation context.

Next steps

• For on-demand translations, look into the <Tx> component.
• Look into more advanced features see the <T> Reference.
• For translating strings, look into tx(), getGT(), and useGT().
• Checkout using variable components and using branching components for more advanced translation patterns.