Traduire des chaînes

Comment traduire des chaînes

Aperçu

Ce guide est un tutoriel étape par étape sur la façon de traduire des chaînes dans votre application React avec useGT().

Configuration

Prérequis

Nous supposons que vous avez déjà installé gt-react dans votre projet et que vous avez suivi ou suivez actuellement le Guide de démarrage rapide.

Traduction de chaînes

Pour toutes les chaînes, utilisez useGT(). N'oubliez pas que useGT() doit être appelé dans un composant enfant de <GTProvider>.

src/components/MyComponent.jsx
import { useGT } from 'gt-react';
 
export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}

Ajout de variables

Les variables sont des valeurs qui peuvent changer, mais ne sont pas traduites. Pour ajouter des variables à vos chaînes, utilisez le modèle suivant :

MyComponent.jsx
import { useGT } from 'gt-react';
 
export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('Hello there, {username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}

Notes

  • Pour la traduction de chaînes, utilisez useGT().
  • Des variables peuvent être ajoutées aux chaînes en utilisant le modèle { variables: { key: value } }.

Prochaines étapes

Sur cette page