<T>

Overview

The <T> component is the main translation method in gt-next. Its contents are translated into a target language. Every <T> component has a unique id which is used to cache translations.

<T id="example">
    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.

Best Practices

Dynamic content

Wrap all dynamic content inside of <Currency>, <DateTime>, <Num>, or <Var> components. The children of the <T> component are translated via our API. All content inside of <T> should be static.

This has two benefits:

1. Efficiency: Translations are generated when content changes. Instead of creating a new translation each time a value changes, only one translation is generated, and the dynamic content is inserted to the translation at render time.
2. Privacy: The children of <Currency>, <DateTime>, <Num>, or <Var> are NEVER sent to the translation API. Because the children of the <T> component are sent to the translation API, if you have sensitive information within a <T> tag, wrap it in one of the variable tags.

Nested components

<T> will only translate of its static children. If you have a component that needs to return some JSX content, then that component will need its own <T> wrapper. You can read more about this topic here.

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-next';
 
export default function Greeting() {
    return (
        <T id="greeting">
            Hello, world!
        </T> 
    );
}

With variables

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

import { T, Var } from 'gt-next';
 
export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Hello, <Var>{user.name}</Var>!
        </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 id="item_count">
            <Plural n={count}  
                singular={<>You have an item.</>}  
                plural={<>You have items.</>}  
            />
        </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.
• Ensure the <T> component is wrapped in a <GTProvider> to access the translation context.

Next steps

• Look into more advanced features like on-demand translation, variables, context, and handling plurals, refer to the <T> Design Patterns documentation.
• For translating strings, look into tx() or getGT() for server-side translations and useGT() for client-side translations.
• Checkout using variable components and using branching components for more advanced translation patterns.