<Tx>

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.

Runtime Translation: <Tx> translations occur at runtime. This means translation will be performed live.

Reference

Props

Prop	Type	Default
`children`	`any`	-
`context?`	`string`	`undefined`
`locale?`	`string`	`undefined`

Descriptions

Prop	Description
`children`	The content to be translated. This can include plain text or JSX structures.
`context`	Additional context to refine the translation. Useful for resolving ambiguous phrases.
`locale`	An optional locale to use for the translation. Will default to browser's most preferred locale that is supported by your app.

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.

SimpleTranslation.jsx

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.

DynamicGreeting.jsx

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.

ItemCount.jsx

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.

Example.jsx

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>
    );
}

Note: A good rule of thumb is that any content that is literally between the two <Tx> in the file will be translated. You can always add another <Tx> to translate the content that is not being translated, though nesting <Tx> components is not recommended.

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().
Checkout using variable components and using branching components for more advanced translation patterns.

<Tx>

On this page