Présentation

Le composant <T> est le principal moyen de traduction dans gt-react.

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

Le composant <T> prend en charge la traduction de texte brut comme de structures JSX complexes. Il propose également des fonctionnalités pour gérer les variables, les pluriels et les traductions en fonction 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), tout contenu children à l’intérieur d’un <T> sera traduit avant le déploiement de votre application. Cela garantit des temps de chargement rapides pour tous les locales, mais ne peut traduire que le contenu connu au moment de la build.

Une fois générées, les traductions sont soit (1) stockées dans le CDN (Content Delivery Network), soit (2) intégrées dans le build output de votre application, selon votre configuration. À partir de là, le contenu traduit est diffusé à vos utilisateurs. Si une traduction est introuvable, elle basculera en secours vers le contenu d’origine.

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 pratique 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.

Lors du 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’erreur, <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 dans les 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 son contenu (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 des 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 des pluriels

Le composant <T> prend également en charge la pluralisation via le 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 les contenus dynamiques.

import { T } from 'gt-react';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // générera une Error // [!code highlight]
        </T>
    );
}

La fonction <T> traduit les éléments qu’elle contient.

import { T } from 'gt-react';

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

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

export default function Example() {
    return (
        <T>
            <div><b>C’est valide !</b></div> // sera traduit // [!code highlight]

            <ValidTranslation> // sera traduit // [!code highlight]
                Bonjour le 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 simple ou des structures JSX, y compris les variables et la pluralisation.
• Veillez à placer le composant <T> à l’intérieur d’un <GTProvider> afin d’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 <T> Design Patterns.
• Pour traduire des chaînes, reportez-vous à useGT.