GitHub

Présentation

useTranslations permet d’accéder aux traductions de chaînes à partir du translation dictionary.

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

useTranslations utilise un dictionary pour stocker l’ensemble du contenu à traduire. Cela diffère de l’utilisation du composant <T> pour la traduction. Si vous envisagez d’utiliser exclusivement des composants <T> pour la traduction, ce document ne vous concerne pas.

Références

Paramètres

Prop

Type

Description

Prop	Description
`id`	Préfixe facultatif à ajouter à toutes les clés de traduction. Utile pour travailler avec des valeurs imbriquées dans le dictionary.

Renvoie

Une fonction de traduction d qui, pour un id donné, retourne la version traduite de l’Entry correspondante

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

Nom	Type	Description
`id`	`string`	L’id de l’Entry à traduire
`options?`	`DictionaryTranslationOptions`	Options de traduction pour personnaliser le comportement de `d`.

Exemples

Utilisation de base du dictionary

Chaque Entry de votre dictionary est traduite.

dictionary.jsx

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

Lorsque nous voulons accéder à ces entrées, nous appelons useTranslations. Cela renvoie une fonction qui prend la clé d’une traduction du dictionary.

Vous devez fournir le dictionary au composant GTProvider.

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"

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

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}.

dictionary.jsx

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

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';

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

  return (
    <p>
      {greetingAlice} // Bonjour Alice // [!code highlight]
    </p>
  );
}

Utilisation des préfixes

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

dictionary.jsx

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

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

UserDetails.jsx

import { useTranslations } from 'gt-react';

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 dictionary.
Le hook useTranslations ne peut être utilisé qu’à l’intérieur d’un composant enveloppé par un composant <GTProvider>.

Étapes suivantes

Présentation

useTranslations permet d’accéder aux traductions de chaînes à partir du translation dictionary.

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

Références

Paramètres

Prop

Type

Description

Prop	Description
`id`	Préfixe facultatif à ajouter à toutes les clés de traduction. Utile pour travailler avec des valeurs imbriquées dans le dictionary.

Renvoie

Une fonction de traduction d qui, pour un id donné, retourne la version traduite de l’Entry correspondante

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

Nom	Type	Description
`id`	`string`	L’id de l’Entry à traduire
`options?`	`DictionaryTranslationOptions`	Options de traduction pour personnaliser le comportement de `d`.

Exemples

Utilisation de base du dictionary

Chaque Entry de votre dictionary est traduite.

dictionary.jsx

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

Lorsque nous voulons accéder à ces entrées, nous appelons useTranslations. Cela renvoie une fonction qui prend la clé d’une traduction du dictionary.

Vous devez fournir le dictionary au composant GTProvider.

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"

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

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}.

dictionary.jsx

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

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';

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

  return (
    <p>
      {greetingAlice} // Bonjour Alice // [!code highlight]
    </p>
  );
}

Utilisation des préfixes

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

dictionary.jsx

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

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

UserDetails.jsx

import { useTranslations } from 'gt-react';

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 dictionary.
Le hook useTranslations ne peut être utilisé qu’à l’intérieur d’un composant enveloppé par un composant <GTProvider>.

Étapes suivantes

Présentation

useTranslations permet d’accéder aux traductions de chaînes à partir du translation dictionary.

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

Références

Paramètres

Prop

Type

Description

Prop	Description
`id`	Préfixe facultatif à ajouter à toutes les clés de traduction. Utile pour travailler avec des valeurs imbriquées dans le dictionary.

Renvoie

Une fonction de traduction d qui, pour un id donné, retourne la version traduite de l’Entry correspondante

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

Nom	Type	Description
`id`	`string`	L’id de l’Entry à traduire
`options?`	`DictionaryTranslationOptions`	Options de traduction pour personnaliser le comportement de `d`.

Exemples

Utilisation de base du dictionary

Chaque Entry de votre dictionary est traduite.

dictionary.jsx

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

Lorsque nous voulons accéder à ces entrées, nous appelons useTranslations. Cela renvoie une fonction qui prend la clé d’une traduction du dictionary.

Vous devez fournir le dictionary au composant GTProvider.

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"

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

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}.

dictionary.jsx

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

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';

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

  return (
    <p>
      {greetingAlice} // Bonjour Alice // [!code highlight]
    </p>
  );
}

Utilisation des préfixes

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

dictionary.jsx

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

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

UserDetails.jsx

import { useTranslations } from 'gt-react';

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 dictionary.
Le hook useTranslations ne peut être utilisé qu’à l’intérieur d’un composant enveloppé par un composant <GTProvider>.

useTranslations

Sur cette page

useTranslations

Sur cette page

useTranslations

Sur cette page

GitHubMettre une étoile sur GitHub

GitHubMettre une étoile sur GitHub

Mettre une étoile sur GitHub

Mettre une étoile sur GitHub