Vue d’ensemble

Le composant <T> est la méthode principale de traduction dans gt-react.

<T id="example"> // [!code highlight]
    Aujourd'hui, je suis allé
    {" au magasin"}
    <p>
        pour <b>acheter</b> quelques <i>courses</i>.
    </p>
</T> 

Le composant <T> permet de traduire aussi bien du texte simple que des 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 affichée 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> seront traduits avant le déploiement de votre application. Cela garantit des temps de chargement rapides pour toutes les locales, mais cela 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 distribution de contenu), soit (2) intégrées dans le build output de votre application, selon votre configuration. À partir de là, le contenu traduit est servi à vos utilisateurs. Si une traduction n’est pas trouvée, le contenu d’origine sera utilisé en secours.

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

Développement

Pendant le développement, la fonction <T> traduira 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> renverra 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, <T> renverra le contenu d’origine.

Vous constaterez un délai lors de la traduction à la demande en développement. Ce délai ne se produira pas lors des builds de production, car tout aura déjà été traduit.

Exemples

Utilisation de base

Le composant <T> peut traduire des chaînes simples à l’aide d’un id et de ses children. N’oubliez pas que le composant <T> doit être utilisé à l’intérieur d’un <GTProvider> pour accéder aux traductions.

import { T } from 'gt-react';

export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Bonjour, monde !
        </T> 
    );
}

Avec variables

Le composant <T> peut inclure des variables pour du contenu dynamique dans les traductions.

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

export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Bonjour, <Var>{user.name}</Var> ! // [!code highlight]
        </T>
    );
}

Avec les pluriels

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

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

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  
                singular={<>Vous avez un article.</>}  
                plural={<>Vous avez des articles.</>}  
            />  // [!code highlight]
        </T>
    );
}

Limitations

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

import { T } from 'gt-react';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // va créer une erreur // [!code highlight]
        </T>
    );
}

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

import { T } from 'gt-react';

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 // [!code highlight]

            <ValidTranslation> // sera traduit // [!code highlight]
                Bonjour, monde ! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <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-react.
• Utilisez le composant <T> pour traduire du texte brut ou des structures JSX, y compris des variables et la gestion du pluriel.
• Assurez-vous que le composant <T> est inclus dans un <GTProvider> pour accéder au contexte de traduction.

Prochaines étapes

• Explorez des fonctionnalités plus avancées comme la traduction à la demande, les variables, le contexte et la gestion des pluriels, et consultez la documentation sur les modèles de conception <T>.
• Pour traduire des chaînes, consultez useGT.