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

title: useTranslations
description: Busca traducciones de cadenas en un diccionario por id con General Translation gt-react. Referencia de la API de useTranslations.

---

El hook `useTranslations` obtiene traducciones de cadenas del [diccionario de traducción](/docs/react/guides/translating-with-dictionaries) por id. Esta es la alternativa basada en diccionarios al componente [`<T>`](/docs/react/reference/components/t) y a [`useGT`](/docs/react/reference/hooks/use-gt).

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`. Los ejemplos importan desde `gt-react`; en su lugar, importa desde el paquete de tu framework.*

## Descripción general [#overview]

Llama a `useTranslations` para obtener una función de búsqueda y luego pásale el id de una entrada.

```tsx
const t = useTranslations(); // obtener la función de traducción
t('greeting.hello'); // pasar un id para obtener una traducción
```

*Nota: En `gt-react`, llama a `useTranslations` dentro de un [`<GTProvider>`](/docs/react/reference/components/gt-provider), con un diccionario proporcionado al proveedor o en la llamada de inicialización. En `gt-next`, también funciona en componentes de servidor síncronos. Si solo usas `<T>`, no lo necesitas.*

## Cómo funciona [#how-it-works]

* **Búsqueda por id.** La función devuelta resuelve una entrada del diccionario por id en la configuración regional activa. Las variables se interpolan, pero nunca se traducen.
* **Prefijo de id raíz.** Pasar un `rootId` añade un prefijo a cada búsqueda, lo que resulta práctico para trabajar dentro de una sección anidada del diccionario.
* **Objetos anidados.** La función devuelta tiene un método `.obj(id)` para leer un objeto anidado del diccionario en lugar de una sola cadena.
* **Los id no encontrados generan una excepción.** Buscar un id que no esté presente en el diccionario genera una excepción.

## Parámetros [#parameters]

| Parámetro            | Descripción                                  | Tipo     | Opcional | Predeterminado |
| -------------------- | -------------------------------------------- | -------- | -------- | -------------- |
| [`rootId`](#root-id) | Prefijo que se aplica a cada id de búsqueda. | `string` | Sí       | —              |

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

**Tipo** `string` · **Opcional**

Un prefijo opcional que se añade al inicio de todos los ids de búsqueda, útil para trabajar con un subconjunto anidado del diccionario.

## Devuelve [#returns]

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

Una función que devuelve la entrada traducida para el id especificado. También incluye un método `.obj(id)` para leer objetos anidados.

| Nombre    | Descripción                                 | Tipo                                                                                         | Opcional |
| --------- | ------------------------------------------- | -------------------------------------------------------------------------------------------- | -------- |
| `id`      | El id de la entrada que se debe resolver.   | `string`                                                                                     | No       |
| `options` | Variables de interpolación para la entrada. | [`DictionaryTranslationOptions`](/docs/react/reference/types/dictionary-translation-options) | Sí       |

## Ejemplos [#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>; // "¡Hola, Alice!"
}
```

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

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

## Notas [#notes]

* `useTranslations` accede a las traducciones del diccionario por id.
* En un componente asíncrono de App Router, usa [`getTranslations`](/docs/react/nextjs/reference/functions/get-translations) en su lugar.
* En `gt-react`, debe usarse dentro de un [`<GTProvider>`](/docs/react/reference/components/gt-provider) con un diccionario disponible.
* Consulta la [guía de diccionarios](/docs/react/guides/translating-with-dictionaries) para la configuración y las convenciones.