# react-native: useTranslations
URL: https://generaltranslation.com/es/docs/react-native/api/dictionary/use-translations.mdx
---
title: useTranslations
description: Referencia de la API para el hook useTranslations
---

{/* GENERADO AUTOMÁTICAMENTE: No lo edites directamente. Edita la plantilla en content/docs-templates/. */}


## Resumen

`useTranslations` se usa para acceder a las traducciones de cadenas desde el [diccionario de traducción](/docs/react-native/guides/dictionaries).

Debe usarse dentro de un componente envuelto por un [`<GTProvider>`](/docs/react-native/api/components/gtprovider).

```jsx
const t = useTranslations(); // Obtiene la función de traducción
t('greeting.hello'); // pasa el id para obtener una traducción
```

<Callout>
  `useTranslations` usa un [diccionario](/docs/react-native/guides/dictionaries) para almacenar todo el contenido para su traducción.
  Esto es diferente de usar el [componente `<T>`](/docs/react-native/guides/t) para su traducción.
  Si solo te interesa usar componentes `<T>` para su traducción, este documento no es relevante.
</Callout>


## Referencia

### Parámetros

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

### Descripción

| Prop | Descripción                                                                                                                            |
| ---- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | Un prefijo opcional que se antepone a todas las claves de traducción. Esto es útil para trabajar con valores anidados del diccionario. |

### Devuelve

Una función de traducción `d` que, dado un id, devuelve la versión traducida de la entrada correspondiente

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

| Nombre     | Tipo                                                                                          | Descripción                                                        |
| ---------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| `id`       | `cadena`                                                                                      | El id de la entrada que se traducirá                               |
| `options?` | [`DictionaryTranslationOptions`](/docs/react-native/api/types/dictionary-translation-options) | Opciones de traducción para personalizar el comportamiento de `d`. |

***


## Ejemplos

### Uso básico del diccionario

Cada entrada de tu diccionario se traducirá.

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

Cuando queremos acceder a estas entradas, llamamos a `useTranslations`.
Esto devuelve una función que recibe la clave de una traducción del diccionario.

Debes pasar el diccionario al componente `GTProvider`.

```jsx title="TranslateGreeting.jsx" copy
import { useTranslations } from 'gt-react-native';
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 de variables [#variables]

Para pasar valores, debes (1) asignar un identificador y (2) hacer referencia a ese identificador al llamar a la función `d`.

En este ejemplo, usamos `{}` para pasar variables a las traducciones.
En el diccionario, asignamos el identificador `{userName}`.

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

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

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

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


### Uso de prefijos

Podemos usar prefijos para traducir solo una parte del diccionario.

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

Como añadimos el valor `'prefix1.prefix2'` al hook `useTranslations`, todas las claves quedan prefijadas con `prefix1.prefix2`:

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

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

***


## Notas

* La función `useTranslations` te permite acceder a las traducciones del diccionario.
* El hook `useTranslations` solo puede usarse dentro de un componente envuelto por el [componente `<GTProvider>`](/docs/react-native/api/components/gtprovider).

## Próximos pasos