# gt-react: General Translation React SDK: useTranslations
URL: https://generaltranslation.com/it/docs/react/api/dictionary/use-translations.mdx
---
title: useTranslations
description: Riferimento dell'API per l'hook useTranslations
---

{/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica il template in content/docs-templates/. */}


## Panoramica

`useTranslations` serve per accedere alle traduzioni delle stringhe dal [dizionario di traduzione](/docs/react/guides/dictionaries).

Deve essere usato all&#39;interno di un componente avvolto da un [`<GTProvider>`](/docs/react/api/components/gtprovider).

```jsx
const t = useTranslations(); // Ottieni la funzione di traduzione
t('greeting.hello'); // passa l'id per ottenere una traduzione
```

<Callout>
  `useTranslations` usa un [dizionario](/docs/react/guides/dictionaries) per memorizzare tutti i contenuti da tradurre.
  Questo è diverso dall&#39;uso del [componente `<T>`](/docs/react/guides/t) per la traduzione.
  Se ti interessa usare solo i componenti `<T>` per la traduzione, questo documento non è pertinente.
</Callout>


## Riferimento

### Parametri

<TypeTable
  type={{
  "id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descrizione

| Prop | Descrizione                                                                                                                         |
| ---- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `id` | Un prefisso facoltativo da anteporre a tutte le chiavi di traduzione. È utile quando si lavora con valori di dizionario nidificati. |

### Restituisce

Una funzione di traduzione `d` che, dato un ID, restituisce la versione tradotta della voce corrispondente

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

| Nome       | Tipo                                                                                   | Descrizione                                                       |
| ---------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| `id`       | `string`                                                                               | L&#39;ID della voce da tradurre                            |
| `options?` | [`DictionaryTranslationOptions`](/docs/react/api/types/dictionary-translation-options) | Opzioni di traduzione per personalizzare il comportamento di `d`. |

***


## Esempi

### Utilizzo di base del dizionario

Ogni voce del dizionario viene tradotta.

```jsx title="dictionary.jsx" copy
const dictionary = {
  greeting: "Hello, Bob", // [!code highlight]
};
export default dictionary;
```

Per accedere a queste voci, usa `useTranslations`.
Questa funzione restituisce una funzione che accetta la chiave di una traduzione del dizionario.

Devi passare il dizionario al componente `GTProvider`.

```jsx title="TranslateGreeting.jsx" copy
import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"

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


### Uso delle variabili [#variables]

Per passare dei valori, devi (1) assegnare un identificatore e (2) richiamarlo quando chiami la funzione `d`.

In questo esempio, usiamo `{}` per passare variabili alle traduzioni.
Nel dizionario, assegniamo l&#39;identificatore `{userName}`.

```jsx title="dictionary.jsx" copy
// [!code word:userName]
const dictionary = {
  greeting: "Hello, {userName}!", // [!code highlight]
};
export default dictionary;
```

```jsx title="TranslateGreeting.jsx" copy
// [!code word:userName]
import { useTranslations } from 'gt-react';

export default function TranslateGreeting() {
  const t = useTranslations();
  
  // Ciao Alice!
  const greetingAlice = t('greeting', { userName: "Alice" }); // [!code highlight]

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


### Uso dei prefissi

Possiamo usare i prefissi per tradurre solo una parte del dizionario.

```jsx title="dictionary.jsx" copy
const dictionary = {
  prefix1: { // [!code highlight]
    prefix2: { // [!code highlight]
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;
```

Poiché abbiamo aggiunto il valore `'prefix1.prefix2'` all&#39;hook `useTranslations`, tutte le chiavi sono precedute dal prefisso `prefix1.prefix2`:

```jsx title="UserDetails.jsx" copy
import { useTranslations } from 'gt-react';

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

***


## Note

* La funzione `useTranslations` ti consente di accedere alle traduzioni del dizionario.
* L&#39;hook `useTranslations` può essere utilizzato solo all&#39;interno di un componente racchiuso in un [componente `<GTProvider>`](/docs/react/api/components/gtprovider).

## Passaggi successivi