Vue d’ensemble

Le composant <Tx> traduit le contenu JSX au moment de l’exécution.

<Tx>
    Aujourd’hui, je suis allé
    {" au magasin"}
    <p>
        pour <b>acheter</b> des <i>courses</i>.
    </p>
</Tx> 

Le composant <Tx> prend en charge la traduction de texte brut comme de structures JSX complexes. Il offre également des fonctionnalités pour gérer les variables, les pluriels et les traductions dépendantes du contexte. <Tx> fonctionne uniquement côté serveur.

Références

Props

Descriptions

Comportement

<Tx> traduit le JSX à l’exécution. Cela signifie que les traductions sont effectuées en temps réel, ce qui vous permet de traduire du contenu uniquement connu au moment de l’exécution. La contrepartie est une latence : le chargement d’une traduction à la demande est nettement plus lent.

Pendant le chargement, <Tx> renvoie undefined, sauf si les langues sont proches (en-US vs en-GB), bien que ce comportement puisse être personnalisé via les paramètres de rendu. En cas d’erreur, <Tx> renvoie le contenu d’origine.

Nous vous conseillons de traduire tout ce qui peut l’être au moment du build avec <T>, getGT ou useGT, et de n’utiliser les traductions à la demande, comme <Tx> et tx, qu’en cas de besoin.

Assurez-vous de suivre le guide de déploiement.

Exemples

Utilisation de base

Le composant <Tx> traduit son contenu (children) à l’exécution.

import { Tx } from 'gt-next';

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

Avec des variables

Vous pouvez utiliser le composant <Var> pour marquer le contenu rendu via la prop children comme variable. Cela permet d’indiquer du contenu qui ne doit pas être traduit.

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

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

Gestion des pluriels

Le composant <T> prend également en charge la pluralisation à l’aide du composant <Plural>.

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

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>Vous avez un article.</>}  
                plural={<>Vous avez des articles.</>}  
            />  
        </Tx>
    );
}

Limitations

La fonction <Tx> ne traduit que ses éléments enfants.

import { Tx } from 'gt-next';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>Pas de traduction</b></div>);

export default function Example() {
    return (
        <Tx>
            <div><b>C’est valide !</b></div> // sera traduit 

            <ValidTranslation> // sera traduit 
                Bonjour, le monde !
            </ValidTranslation>

            <InvalidTranslation /> // ne sera pas traduit
        </Tx>
    );
}

Notes

• Le composant <Tx> est conçu pour traduire le contenu de votre application au moment de l’exécution.
• Utilisez le composant <Tx> pour traduire du texte brut ou des structures JSX, y compris des variables et la pluralisation.

Prochaines étapes

• Pour les Buildtime Translation, consultez le composant <T>.
• Pour des fonctionnalités plus avancées, voir la référence de <T>.
• Pour traduire des chaînes, consultez tx, getGT et useGT.