# General Translation React SDKs (gt-react, gt-next): t
URL: https://generaltranslation.com/es/docs/react/reference/functions/t-function.mdx
---

title: t
description: Traduce cadenas de forma sincrónica en el ámbito del módulo con General Translation gt-react. Referencia de la API para t.

---

La función `t` es una función de traducción de cadenas sincrónica a nivel de módulo para aplicaciones de `gt-react` del lado del cliente. A diferencia de [`useGT`](/docs/react/reference/hooks/use-gt) (que requiere contexto de React) o [`msg`](/docs/react/reference/functions/msg) (que codifica cadenas para resolverlas más adelante), `t` devuelve directamente la cadena traducida y puede llamarse desde cualquier parte del código del navegador, incluso fuera de componentes de React.

*Disponible en `gt-react` y `gt-tanstack-start`. Los ejemplos importan desde `gt-react`; importa desde `gt-tanstack-start` para TanStack Start.*

*Nota: `gt-next` y `gt-react-native` no la exportan. En `gt-next`, usa [`useGT`](/docs/react/reference/hooks/use-gt) en componentes sincrónicos o [`getGT`](/docs/react/nextjs/reference/functions/get-gt) en componentes async de App Router.*

## Descripción general [#overview]

Importa `t` desde `gt-react` y llámalo con una cadena de texto.

```tsx
import { t } from 'gt-react';

const greeting = t('Hello, world!');
```

También se puede usar como un literal de plantilla etiquetado:

```tsx
import { t } from 'gt-react';

const greeting = t`Hello, ${name}!`;
```

*Nota: `t` lee las traducciones de la caché del cliente cargada por [`initializeGTSPA`](/docs/react/reference/config#initialize-spa). Asegúrate de que la inicialización se haya ejecutado antes de cualquier módulo que llame a `t` en el ámbito del módulo. Llamar a `t` en el ámbito del módulo en una aplicación renderizada en el servidor está prohibido: en desarrollo, genera una excepción; en producción, registra un error y recurre al valor de la configuración regional predeterminada.*

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

* **Traducción sincrónica en el ámbito del módulo.** Una vez cargadas las traducciones de la configuración regional activa, `t` las lee de forma sincrónica, sin sobrecarga. Como no usa contexto de React, funciona tanto en el ámbito del módulo (constantes, tablas de rutas) como dentro de los componentes.
* **Se resuelve en el momento de la carga.** Las traducciones se resuelven cuando se evalúan los módulos, por lo que **cambiar de configuración regional requiere recargar por completo la página**: el navegador debe volver a ejecutar los módulos para usar la nueva configuración regional. Este patrón solo funciona en aplicaciones del lado del cliente.
* **Las variables no se traducen.** Los valores interpolados se insertan en la cadena traducida, pero nunca se traducen.
* **Comportamiento en el servidor.** Llamar a `t` en el ámbito del módulo está prohibido cuando la estrategia de renderizado es `server-render`; es decir, antes de que se inicialice el almacén de condiciones en tiempo de solicitud. En desarrollo, esto genera un error; en producción, registra un error y usa como respaldo el valor de `defaultLocale`. Para la traducción del lado del servidor, usa hooks basados en contexto, como [`useGT`](/docs/react/reference/hooks/use-gt).

## Literal de plantilla etiquetada [#tagged-template]

`t` se puede usar como literal de plantilla etiquetada para una sintaxis más natural. Son equivalentes:

```tsx
import { t } from 'gt-react';

t('Hello, {name}!', { name: 'Alice' });
t`Hello, ${name}!`;
```

La sintaxis etiquetada interpola las variables directamente desde la plantilla, así que no necesitas marcadores de posición de estilo ICU ni un objeto de opciones.

### Registro global [#macros]

En lugar de importar `t` en cada archivo, regístralo de forma global importando una sola vez el módulo de macros en el punto de entrada de tu aplicación:

```tsx
import 'gt-react/macros';
```

Esto establece `globalThis.t`, lo que hace que la plantilla etiquetada esté disponible en todas partes sin necesidad de una importación explícita:

```tsx
// No se necesita importación
const labels = {
  save: t`Save`,
  cancel: t`Cancel`,
};
```

## Parámetros [#parameters]

| Parámetro             | Descripción                                          | Type                   | Opcional | Predeterminado |
| --------------------- | ---------------------------------------------------- | ---------------------- | -------- | -------------- |
| [`message`](#message) | La cadena que se va a traducir.                      | `string`               | No       | —              |
| [`options`](#options) | Variables de interpolación y opciones de traducción. | `GTTranslationOptions` | Sí       | —              |

### `message` [#message]

**Tipo** `string` · **Obligatorio**

La cadena que se va a traducir. Cuando se usa como plantilla etiquetada, corresponde a la cadena de plantilla.

### `options` [#options]

**Tipo** `GTTranslationOptions` · **Opcional**

Variables de interpolación y opciones como `$context` y `$id`. Consulta [`InlineTranslationOptions`](/docs/react/reference/types/inline-translation-options).

## Devuelve [#returns]

**Tipo** `string`

La cadena traducida para la configuración regional activa, o la cadena de origen si no hay traducción disponible.

## Ejemplos [#examples]

```tsx title="constants.ts"
import { t } from 'gt-react';

export const ERROR_MESSAGES = {
  notFound: t('Página no encontrada'),
  unauthorized: t('No tienes permiso para ver esta página'),
  serverError: t('Algo salió mal. Por favor, inténtalo de nuevo más tarde.'),
};
```

```tsx title="routes.ts"
import { t } from 'gt-react';

export const routes = [
  { path: '/', label: t('Home') },
  { path: '/dashboard', label: t('Dashboard') },
  { path: '/settings', label: t('Settings') },
];
```

```tsx
import { t } from 'gt-react';

const message = t('Hello, {name}!', { name: 'Alice' });
// Los valores de las variables se insertan, no se traducen.
```

## Notas [#notes]

* `t` es síncrono y se puede llamar en el ámbito del módulo; no usa el contexto de React.
* Cambiar de configuración regional requiere recargar por completo la página.
* Para traducir cadenas dentro de componentes, usa [`useGT`](/docs/react/reference/hooks/use-gt); para codificar cadenas para su resolución posterior, usa [`msg`](/docs/react/reference/functions/msg).