Présentation

Le composant <T> est la méthode principale 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), tout contenu children à l’intérieur d’un <T> est traduit 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 (Content Delivery Network) soit (2) intégrées dans le résultat de build de votre application, selon votre configuration. À partir de là, le contenu traduit est diffusé à vos utilisateurs. Si une traduction est introuvable, un contenu de secours s’applique et le texte d’origine est utilisé.

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

Développement

Pendant le développement, le composant <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, sauf si le contenu est explicitement traduit à la demande, c’est‑à‑dire en utilisant <Tx> ou tx.

Exemples

Utilisation de base

Le <T> traduira son contenu.

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 du contenu qui ne doit pas être traduit. En général, les composants <Var> entourent du contenu dynamique.

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

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

Gestion des pluriels

Le composant <T> prend également en charge la pluralisation via le 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} {/* déclenchera une Error */}
        </T>
    );
}

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

import { T } from 'gt-next';

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

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

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

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