useTranslations()

Aperçu

useTranslations() est utilisé pour accéder aux traductions de chaînes depuis le dictionnaire de traduction. Il doit être utilisé dans un composant enveloppé par un <GTProvider>.

const d = useTranslations(); // Obtenir la fonction de traduction
d('greeting.hello'); // passer l'id pour obtenir une traduction

Pour les composants asynchrones, voir getTranslations().

Référence

Paramètres

Description

Retour

Une fonction de traduction d() qui, étant donné un id, retournera la version traduite de l'entrée correspondante

(id: string, options?: DictionaryTranslationOptions) => React.ReactNode

Exemples

Utilisations de base

Chaque entrée de votre dictionnaire est traduite.

const dictionary = {
  greeting: "Hello, Bob", 
};
export default dictionary;

Lorsque nous voulons accéder à ces entrées (côté client), nous appelons useTranslations(). Cela retourne une fonction qui accepte la clé d'une traduction du dictionnaire.

import { useTranslations } from 'gt-next';

export default async function TranslateGreeting() {
  const d = useTranslations(); 
  return (
    <p>
      {d('greeting')} // Hello, Alice // [!code highlight]
    </p>
  );
}

Utilisation de variables

Pour passer des valeurs, vous devez (1) assigner un identifiant et (2) référencer l'identifiant lors de l'appel de la fonction d().

Dans cet exemple, nous utilisons {} pour passer des variables aux traductions. Dans le dictionnaire, nous assignons l'identifiant {userName}.

const dictionary = {
  greeting: "Hello, {userName}!", 
};
export default dictionary;

import { useTranslations } from 'gt-next';

export default async function TranslateGreeting() {
  const d = useTranslations();
  
  // Hello Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

  return (
    <p>
      {greetingAlice}
    </p>
  );
}

Utilisation de préfixes

Nous pouvons utiliser des préfixes pour ne traduire qu'un sous-ensemble du dictionnaire.

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;

Parce que nous avons ajouté la valeur 'prefix1.prefix2' au hook useTranslations, toutes les clés sont préfixées avec prefix1.prefix2 :

import { useTranslations } from 'gt-next';

export default function UserDetails() {
  const d = useTranslations('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

Notes

• La fonction useTranslations() vous permet d'accéder aux traductions du dictionnaire côté client.
• Le hook useTranslations() ne peut être utilisé que dans un composant enveloppé par un composant <GTProvider>.

Prochaines étapes

• Pour les traductions côté serveur, voir getTranslations().
• En savoir plus sur l'utilisation des dictionnaires dans la référence des dictionnaires.
• Voir DictionaryTranslationOptions pour plus d'informations sur les options de traduction.