useDict()

Aperçu

useDict() est utilisé pour accéder aux traductions de chaînes depuis le dictionnaire de traduction pour les composants côté client. Il doit être utilisé à l'intérieur d'un composant enveloppé par un <GTProvider>.

const d = useDict(); // Get the translation function
d('greeting.hello'); // pass the id to get a translation

Pour les traductions côté serveur, voir getDict().

Référence

Paramètres

Description

Retourne

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 useDict(). Cela retourne une fonction qui accepte la clé d'une traduction du dictionnaire.

"use client";
import { useDict } from 'gt-next/client';

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

Utilisation de variables

Pour passer 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 dictionnaire, nous attribuons l'identifiant {userName}.

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

"use client";
import { useDict } from 'gt-next/client';

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

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

Utilisation des 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 useDict, toutes les clés sont préfixées par prefix1.prefix2 :

"use client";
import { useDict } from 'gt-next/client';

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

Notes

• La fonction useDict() vous permet d'accéder aux traductions du dictionnaire côté client.
• Le hook useDict() ne peut être utilisé qu'à l'intérieur d'un composant enveloppé par un composant <GTProvider>.

Prochaines étapes

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