# General Translation React SDKs (gt-react, gt-next): useTranslations
URL: https://generaltranslation.com/it/docs/react/reference/hooks/use-translations.mdx
---

title: useTranslations
description: Recupera le traduzioni delle stringhe da un dizionario per id con General Translation gt-react. Riferimento API per useTranslations.

---

L&#39;hook `useTranslations` consente di accedere alle traduzioni delle stringhe dal [dizionario di traduzione](/docs/react/guides/translating-with-dictionaries) tramite id. È l&#39;alternativa basata sul dizionario al componente [`<T>`](/docs/react/reference/components/t) e a [`useGT`](/docs/react/reference/hooks/use-gt).

*Disponibile in `gt-react`, `gt-next`, `gt-tanstack-start` e `gt-react-native`. Gli esempi importano da `gt-react`; importa invece dal pacchetto del tuo framework.*

## Panoramica [#overview]

Chiama `useTranslations` per ottenere una funzione di lookup, quindi passa l&#39;id di una voce.

```tsx
const t = useTranslations(); // ottieni la funzione di traduzione
t('greeting.hello'); // passa un id per ottenere una traduzione
```

*Nota: in `gt-react`, chiama `useTranslations` all&#39;interno di un [`<GTProvider>`](/docs/react/reference/components/gt-provider), fornendo un dizionario al provider o alla chiamata di inizializzazione. In `gt-next`, funziona anche nei componenti server sincroni. Se usi solo `<T>`, non ti serve.*

## Come funziona [#how-it-works]

* **Lookup basato su id.** La funzione restituita risolve una voce del dizionario tramite id nell&#39;impostazione regionale attiva. Le variabili vengono interpolate, ma non vengono mai tradotte.
* **Prefisso dell&#39;id radice.** Passare un `rootId` aggiunge un prefisso a ogni lookup, il che è utile per lavorare all&#39;interno di una sezione annidata del dizionario.
* **Oggetti annidati.** La funzione restituita include un metodo `.obj(id)` per leggere un oggetto annidato del dizionario anziché una singola stringa.
* **Gli id mancanti generano un errore.** Un lookup di un id non presente nel dizionario genera un errore.

## Parametri [#parameters]

| Parametro            | Descrizione                             | tipo     | Facoltativo | Predefinito |
| -------------------- | --------------------------------------- | -------- | ----------- | ----------- |
| [`rootId`](#root-id) | Prefisso applicato a ogni id di lookup. | `string` | Sì          | —           |

### `rootId` [#root-id]

**Tipo** `string` · **facoltativo**

Un prefisso facoltativo anteposto a tutti gli id usati per il lookup, utile per lavorare con un sottoinsieme annidato del dizionario.

## Returns [#returns]

**tipo** `(id: string, options?: DictionaryTranslationOptions) => string`

Una funzione che restituisce la voce tradotta per l&#39;id indicato. Include anche un metodo `.obj(id)` per leggere oggetti annidati.

| Nome      | Descrizione                              | tipo                                                                                         | Facoltativo |
| --------- | ---------------------------------------- | -------------------------------------------------------------------------------------------- | ----------- |
| `id`      | L&#39;id della voce da risolvere.        | `string`                                                                                     | No          |
| `options` | Variabili di interpolazione per la voce. | [`DictionaryTranslationOptions`](/docs/react/reference/types/dictionary-translation-options) | Sì          |

## Esempi [#examples]

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

```tsx title="TranslateGreeting.tsx"
import { useTranslations } from 'gt-react';

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

```tsx title="dictionary.ts"
const dictionary = {
  greeting: 'Hello, {userName}!', // [!code highlight]
};
export default dictionary;
```

```tsx title="TranslateGreeting.tsx"
import { useTranslations } from 'gt-react';

export default function TranslateGreeting() {
  const t = useTranslations();
  const greetingAlice = t('greeting', { userName: 'Alice' }); // [!code highlight]
  return <p>{greetingAlice}</p>; // "Hello, Alice!"
}
```

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

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

## Note [#notes]

* `useTranslations` consente di accedere alle traduzioni del dizionario tramite `id`.
* In un componente App Router asincrono, usa invece [`getTranslations`](/docs/react/nextjs/reference/functions/get-translations).
* In `gt-react`, deve essere utilizzato all&#39;interno di [`<GTProvider>`](/docs/react/reference/components/gt-provider) con un dizionario disponibile.
* Consulta la [guida ai dizionari](/docs/react/guides/translating-with-dictionaries) per la configurazione e le convenzioni.