# gt-next: General Translation Next.js SDK: InlineTranslationOptions
URL: https://generaltranslation.com/es/docs/next/api/types/inline-translation-options.mdx
---
title: InlineTranslationOptions
description: Referencia de la API para el tipo InlineTranslationOptions
---

## Descripción general

El tipo `InlineTranslationOptions` se usa para pasar variables a las traducciones en línea y especificar su comportamiento de renderización.
También puedes añadir contexto y un identificador a la traducción.
Se usa con [`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) y [`msg`](/docs/next/api/strings/msg) para pasar variables a traducciones en línea de cadenas.

<Callout>
  **Traducción en tiempo de compilación:**
  Las variables no se traducen con `useGT`, `getGT` y `msg`; solo se traduce la cadena original.
  Consulta [`tx`](/docs/next/api/strings/tx) para traducir cadenas con contenido dinámico.
</Callout>

## Referencia

### Parámetros

<TypeTable
  type={{
  "[variable]?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "$context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$maxChars?": {
      type: 'number',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descripción

| Prop         | Descripción                                                                                                                                                                           |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `[variable]` | Las variables se pasan como claves de nivel superior en el objeto de opciones. Los nombres de las claves corresponden a los marcadores de posición de la cadena (p. ej., `{username}`). |
| `$context`   | Proporciona contexto del contenido para guiar la traducción.                                                                                                                          |
| `$id`        | Proporciona un identificador para usarlo con el editor de traducción.                                                                                                                 |
| `$maxChars`  | Limita el número de caracteres de la traducción. La biblioteca aplica este límite de forma estricta.                                                                                  |

***

## Ejemplos

### Contexto

Para añadir contexto a la cadena, usamos la prop `$context`.

```jsx title="Component.tsx"
// [!code word:$context]
import { useGT } from 'gt-next';

const Component = () => {
  const gt = useGT();
  return <div>{gt('Hello, world!', { $context: 'un saludo formal' })}</div>;
};
```


### Pasar variables

Para añadir una variable a la cadena, usamos la sintaxis `{variable-name}`, donde las llaves rodean el nombre de la variable.

```jsx title="Component.tsx"
// [!code word:username]
import { useGT } from 'gt-next';

const Component = () => {
  const gt = useGT();
  return <div>{gt('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};
```


### Uso del formato de mensajes ICU

`gt-next` admite el formato de mensajes ICU, que también te permite formatear las variables.

```jsx title="Component.tsx"
// [!code word:account-balance]
import { useGT } from 'gt-next';

const Component = () => {
  const gt = useGT();
  return <div>
    { gt(
      'Tu saldo de cuenta: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};
```

Consulta la [documentación sobre el formato de mensajes ICU](https://unicode-org.github.io/icu/userguide/format_parse/messages/) para obtener más información.


### Límites de caracteres

Usa `$maxChars` para limitar la longitud de la traducción:

```jsx title="Component.tsx"
// [!code word:$maxChars]
import { useGT } from 'gt-next';

const Component = () => {
  const gt = useGT();
  return <div>{gt('Welcome to our application', { $maxChars: 15 })}</div>; 
  // Output: "Bienvenue à no\u202F…"
};
```

***


## Notas

* `InlineTranslationOptions` se usa para traducciones de cadenas en línea.
* Las variables se pasan como claves de nivel superior en el objeto de opciones, no anidadas bajo la clave `variables`.

## Siguientes pasos

* Consulta [`useGT`](/docs/next/api/strings/use-gt) y [`getGT`](/docs/next/api/strings/get-gt) para obtener más información sobre la traducción de cadenas en línea.
* Consulta [`formato de mensaje ICU`](https://unicode-org.github.io/icu/userguide/format_parse/messages/) para obtener más información sobre las opciones de formato.