Présentation

Le composant <T> est le principal mécanisme de traduction dans gt-next.

<T>
    Aujourd'hui, je suis allé
    {" au magasin"}
    <p>
        pour <b>acheter</b> des <i>provisions</i>.
    </p>
</T>

Le composant <T> prend en charge la traduction de texte simple 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.

Références

Props

Descriptions

Renvoie

React.JSX.Element|undefined contenant la traduction rendue ou le contenu de secours selon la configuration fournie.

Comportement

Production

Pendant le processus de CD (Continuous Delivery/Déploiement continu), tous les children à l’intérieur d’un <T> sont traduits avant le déploiement de votre application. Cela garantit des temps de chargement rapides pour toutes les locales, mais ne peut traduire que le contenu connu au moment du build.

Une fois générées, les traductions sont soit (1) stockées dans le CDN (réseau de diffusion de contenu), soit (2) intégrées dans la sortie de build de votre application, selon votre configuration. À partir de là, le contenu traduit est distribué à vos utilisateurs. Si aucune traduction n’est trouvée, un secours vers le contenu original sera appliqué.

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

Développement

Pendant le développement, la fonction <T> traduit le contenu à la demande. C’est utile pour prototyper l’apparence de votre application dans différentes langues. N’oubliez pas d’ajouter une clé d’API de développement à votre environnement pour activer ce comportement.

Pendant le chargement, <T> renvoie undefined, sauf si les langues sont similaires (en-US vs en-GB). Ce comportement peut toutefois être personnalisé via les paramètres de rendu. En cas d’Error, <T> renvoie le contenu d’origine.

Vous observerez un délai lors de la traduction à la demande en développement. Ce délai ne se produit pas lors des builds de production, sauf si le contenu est explicitement traduit à la demande, c.-à-d. en utilisant <Tx> ou tx.

Exemples

Utilisation de base

Le <T> traduit ses children.

import { T } from 'gt-next';

export default function Greeting() {
    return (
        <T>
            Bonjour, monde !
        </T>
    );
}

Avec des variables

Vous pouvez utiliser le composant <Var> pour marquer les children comme des variables. Cela vous permet d’indiquer le contenu qui ne doit pas être traduit. En général, les composants <Var> enveloppent du contenu dynamique.

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

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

Avec les pluriels

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

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

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

Limitations

Le composant <T> ne traduit pas le contenu dynamique.

import { T } from 'gt-next';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* va créer une erreur */}
        </T>
    );
}

La fonction <T> traduit ses éléments enfants.

import { T } 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 (
        <T>
            <div><b>Ceci est valide !</b></div> {/* sera traduit */}

            
            <ValidTranslation>
                Bonjour, monde !  {/* sera traduit */}
            </ValidTranslation> 

            <InvalidTranslation /> {/* ne sera pas traduit */}
        </T>
    );
}

Notes

• Le composant <T> est conçu pour traduire le contenu de votre application. C’est la méthode principale de localisation dans gt-next.
• Utilisez le composant <T> pour traduire du texte brut ou des structures JSX, y compris des variables et la pluralisation.
• Si vous utilisez le composant <T> côté client, assurez-vous qu’il est encapsulé dans un <GTProvider> afin d’accéder au contexte de traduction.

Prochaines étapes

• Pour des traductions à la demande, consultez le composant <Tx>.
• Pour des fonctionnalités plus avancées, voir la référence <T>.
• Pour traduire des chaînes, consultez tx, getGT et useGT.