Overview

The <Tx> component translates JSX content at runtime.

<Tx>
    Today, I went to
    {" the shop"}
    <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

Behaviour

<Tx> translates JSX at runtime. This means translations happen live, so you can translate content that’s only known at runtime. The trade-off is latency: waiting for an on‑demand translation to load is significantly slower.

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

Our advice is to translate as much as possible 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 lets you 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 pluralisation via the <Plural> component.

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

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>You have one item.</>}  
                plural={<>You have {count} 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 pluralisation.

Next steps

• For build-time translations, see the <T> component.
• For more advanced features, see the <T> reference.
• To translate strings, see tx, getGT, and useGT.