Présentation

useTranslations permet d’accéder aux traductions de chaînes depuis le translation dictionary.

Il doit être utilisé dans un composant enveloppé par un <GTProvider>.

const d = useTranslations(); // Récupère la fonction de traduction
d('greeting.hello'); // passe l'id pour obtenir une traduction

Pour les composants asynchrones, consultez getTranslations.

Références

Paramètres

Description

Renvoie

Une fonction de traduction d qui, donné un id, renverra la version traduite de l’entrée correspondante

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

Exemples

Utilisation de base du dictionary

Chaque Entry de votre dictionary est traduite.

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

Lorsque nous voulons accéder à ces entrées (côté client), nous appelons useTranslations. Cela renvoie une fonction qui prend la clé d’une traduction dans le dictionary.

import { useTranslations } from 'gt-next';

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

Utiliser des variables

Pour transmettre des valeurs, vous devez (1) attribuer un identifiant et (2) référencer cet identifiant lors de l’appel de la fonction d.

Dans cet exemple, nous utilisons {} pour passer des variables aux traductions. Dans le dictionary, nous attribuons l’identifiant {userName}.

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

import { useTranslations } from 'gt-next';

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

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

Utiliser des préfixes

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

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

Comme nous avons ajouté la value 'prefix1.prefix2' au hook useTranslations, toutes les clés sont préfixées par 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>
  );
}

Remarques

• La fonction useTranslations vous permet d’accéder aux traductions du dictionary 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, consultez getTranslations.
• Pour en savoir plus sur l’utilisation des dictionaries, consultez la documentation de référence sur les dictionaries.