Overview

The <Tx> component translates jsx content at runtime.

<Tx>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</Tx> 

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

Reference

Props

Descriptions

Behavior

<Tx> translates jsx at runtime. This means that translations are performed live, so you can translate content that is only known at runtime. The trade off is that there is a delay while waiting for an on-demand translation to load is significantly slower.

While loading, <Tx> 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, <Tx> will return the original content.

Our advice is to translate everything you can at build time using <T>, getGT, or useGT, and only use on-demand translations, like <Tx>and tx when necessary.

Make sure to follow the deployment guide here.

Examples

Basic usage

The <Tx> component will translate its children at runtime.

import { Tx } from 'gt-next';

export default function Greeting() {
    return (
        <Tx id="greeting">
            Hello, world!
        </Tx> 
    );
}

With variables

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

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

export default function DynamicGreeting(user) {
    return (
        <Tx>
            Hello, <Var>{user.name}</Var>
        </Tx>
    );
}

With plurals

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

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

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>You have an item.</>}  
                plural={<>You have items.</>}  
            />  
        </Tx>
    );
}

Limitations

The <Tx> function only translates its descendants.

import { Tx } 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 (
        <Tx>
            <div><b>This is valid!</b></div> // will be translated 

            <ValidTranslation> // will be translated 
                Hello, world!
            </ValidTranslation>

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

Notes

• The <Tx> component is designed for translating content in your application at runtime.
• Use the <Tx> component to translate plain text or JSX structures, including variables and pluralization.

Next steps

• For buildtime translations, look into the <T> component.
• Look into more advanced features see the <T> Reference.
• For translating strings, look into tx, getGT, and useGT.