Aperçu

Introduction

Le SDK React de General Translation est une bibliothèque open-source d'internationalisation (i18n) pour React.

Il offre un ensemble d'outils pour vous aider à internationaliser votre application React de manière simple et maintenable, avec une parité de fonctionnalités par rapport à d'autres bibliothèques i18n populaires.

Le SDK React peut être utilisé sans la plateforme General Translation, et fonctionnera de manière très similaire aux autres bibliothèques i18n.

Cependant, il s'intègre également à notre plateforme, offrant des fonctionnalités supplémentaires telles que :

• Rechargement à chaud des traductions en développement
• Traductions automatiques par IA
• Synchronisation des traductions avec la plateforme General Translation
• Intégration native avec notre CDN de traduction

Concepts

Il y a 4 concepts principaux à comprendre concernant le SDK.

Le composant <GTProvider>

import { GTProvider } from 'gt-react';

Le composant <GTProvider> est le composant principal que vous devez ajouter à votre application.

Il est utilisé pour fournir le contexte au reste de votre application.

Ce contexte inclut la langue actuelle et les traductions correspondantes pour cette langue.

Considérations importantes

• Le provider doit englober l'ensemble de votre application.
• Idéalement, il doit être placé aussi haut que possible dans l'arborescence, par exemple dans votre composant racine.

Consultez la page GTProvider pour plus d'informations.

Le composant <T>

Le composant <T> est la méthode recommandée pour traduire le contenu dans votre application.

Il s'agit d'un composant React qui peut être utilisé pour envelopper n'importe quel élément JSX, et qui rendra automatiquement le contenu de l'élément dans une langue prise en charge.

Exemples

<T>
  <div>Hello, world!</div>
</T>

<T>
  <div>
    <h1> Here is an image </h1>
    <img src="https://example.com/image.png" alt="Example" />
  </div>
</T>

<T>
  Formatting can be done easily with the `<T>` component.
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency>{1000}</Currency>
</T>

Consultez le guide traduire du JSX pour apprendre les différentes façons d'utiliser le composant <T>.

Consultez la Référence API T pour l'API du composant <T>.

Le hook useGT

Le hook useGT est un hook React qui peut être utilisé de manière similaire au composant <T>, avec quelques compromis.

Le hook retourne une fonction qui peut être utilisée pour traduire des chaînes de caractères.

const translate = useGT();

translate('Hello, world!');

Comparé au composant <T>, le hook useGT offre plus de flexibilité dans votre base de code.

Par exemple, si vous avez une structure de données complexe avec des chaînes imbriquées, un composant <T> serait plus difficile à utiliser.

const t = useGT();
const data = {
  title: t('Hello, world!'),
  description: t('This is a description'),
};

Consultez le guide strings pour en savoir plus sur le hook useGT.

Consultez la référence API de useGT pour plus d'informations.

Le hook useDict

Le hook useDict est un hook React qui renvoie une fonction pouvant être utilisée pour récupérer des traductions pour une clé donnée.

const dictionary = {
  hello: {
    world: 'Hello, world!',
  },
};

const translate = useDict();
translate('hello.world');

Ce comportement est similaire à d'autres bibliothèques de traduction, comme react-i18next et next-intl.

Consultez le guide des dictionnaires pour en savoir plus sur le hook useDict.

Consultez la référence API de useDict pour plus d'informations.

Prochaines étapes

• Découvrez comment configurer votre projet React avec le SDK : Démarrage rapide du projet
• Découvrez comment traduire des chaînes avec le hook useGT : Traduire des chaînes
• Découvrez comment traduire du contenu JSX avec le composant <T> : Traduire du JSX