# react-native: InlineTranslationOptions
URL: https://generaltranslation.com/es/docs/react-native/api/types/inline-translation-options.mdx
---
title: InlineTranslationOptions
description: Referencia de la API para el tipo InlineTranslationOptions
---

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


## Resumen

El tipo `InlineTranslationOptions` se usa para pasar variables a las traducciones en línea y especificar su comportamiento de renderizado.
También puedes agregar contexto y un identificador a la traducción.
Se usa con [`useGT`](/docs/react-native/api/strings/use-gt) y [`msg`](/docs/react-native/api/strings/msg) para pasar variables a la traducción de cadena en línea.

<Callout>
  **Traducción en tiempo de compilación:**
  Las traducciones con `useGT` y `msg` se realizan en tiempo de compilación; sin embargo, las variables nunca se traducen.
  En su lugar, se insertan en la traducción con el formato correspondiente.
  Asegúrate de seguir la [guía de despliegue aquí](/docs/react-native/tutorials/quickdeploy).
</Callout>

## Referencia

### Parámetros

<TypeTable
  type={{
  "variables?": {
      type: 'Record<string, any>',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descripción

| Prop        | Descripción                                                                                                                                                                                          |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `variables` | Un objeto cuyas claves identifican dónde se inserta cada valor en la cadena.                                                                                                                         |
| `$context`  | Opcionalmente, incluye `$context` como una variable en el objeto `variables` para aportar contexto al contenido (usado para su traducción).                                                          |
| `$id`       | Opcionalmente, incluye `$id` como una variable en el objeto `variables` para proporcionar un identificador para usarlo con el editor de traducción.                                                  |
| `$maxChars` | Opcionalmente, incluye `$maxChars` como una variable para limitar la cantidad de caracteres de la traducción. La biblioteca aplica estrictamente este límite mediante la lógica de `formatCutoff()`. |

***

## Ejemplos

### Contexto

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

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

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


### Pasar variables

Para agregar una variable a la cadena, usamos la sintaxis `{variable-name}`, en la que el nombre de la variable va entre llaves.

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

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


### Uso del formato de mensajes ICU

`gt-react-native` admite el formato de mensajes ICU, lo que también te permite dar formato a tus variables.

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

const Component = () => {
  const gt = useGT();
  return <div>
    { gt(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};
```

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


### 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-react-native';

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

***


## Notas

* `InlineTranslationOptions` se usa para la traducción de cadena en línea.
* El objeto `variables` proporciona valores al texto.
* El objeto `variablesOptions` define el comportamiento de las variables.

## Próximos pasos

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