Vue d’ensemble

Le composant <Tx> traduit le contenu JSX à l’exécution.

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

Le composant <Tx> prend en charge la traduction de texte brut ainsi que de structures JSX complexes. Il offre également des fonctionnalités pour gérer les variables, les pluriels et les traductions dépendant du contexte. <Tx> s’exécute 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 un délai d’attente : 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’Error, <Tx> renvoie le contenu d’origine.

Nous vous recommandons 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 nécessité.

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

Exemples

Utilisation de base

Le composant <Tx> traduit ses 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 les children comme variables. Cela vous permet d’indiquer le 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>
    );
}

Avec les pluriels

Le composant <T> prend également en charge la pluralization à 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 descendants.

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>Ceci est valide !</b></div> // sera traduit 

            <ValidTranslation> // sera traduit 
                Bonjour, 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 simple 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, consultez la référence de <T>.
• Pour traduire des chaînes, consultez tx, getGT et useGT.