# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Var>`
URL: https://generaltranslation.com/es/docs/react/reference/components/var.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Renderiza un valor dinámico dentro de una traducción sin traducirlo. Referencia de la API del componente `<Var>`.

El componente `<Var>` renderiza contenido dinámico que no debe traducirse. Úsalo para valores, fragmentos de código o información privada, como claves de API o datos personales, para que el texto que lo rodea siga siendo traducible.

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`.*

## Descripción general [#overview]

Coloca `<Var>` dentro de un [`<T>`](/docs/react/reference/components/t) para indicar que un valor es una variable. El valor se renderiza tal cual, y el resto de la oración se traduce a su alrededor.

```tsx
<T>
  Your name is <Var>{user.name}</Var>.
</T>
```

*Nota: `<Var>` siempre se usa dentro de un [`<T>`](/docs/react/reference/components/t). Considéralo el comodín para los valores dinámicos que no encajan en [`<Num>`](/docs/react/reference/components/num), [`<Currency>`](/docs/react/reference/components/currency) o [`<DateTime>`](/docs/react/reference/components/datetime).*

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

* **Excluido de la traducción.** El contenido de `<Var>` no se envía a la API de General Translation. Se renderiza exactamente tal como se proporciona, lo que mantiene intactos los valores dinámicos o sensibles.
* **Preserva la traducción del texto circundante.** Marcar un valor como variable permite que el texto que lo rodea siga siendo una sola entrada traducible, con la variable colocada en la posición correcta para cada configuración regional.

## Props [#props]

| Prop                    | Descripción                                             | Type        | Opcional | Predeterminado |
| ----------------------- | ------------------------------------------------------- | ----------- | -------- | -------------- |
| [`children`](#children) | El valor que se renderiza sin traducir.                 | `ReactNode` | No       | —              |
| [`name`](#name)         | Nombre de variable de la entrada, usado para metadatos. | `string`    | Sí       | —              |

### `children` [#children]

**Tipo** `ReactNode` · **Obligatorio**

El contenido que se renderiza dentro del componente. Se pasa tal cual y nunca se traduce.

### `name` [#name]

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

Un nombre opcional para la variable, que se usa como metadato y para identificar el valor en la entrada de traducción.

## Ejemplos [#examples]

*Los ejemplos importan desde `gt-react`; importa desde el paquete de tu framework en su lugar.*

```tsx title="Address.tsx"
import { T, Var } from 'gt-react';

export default function Example({ user }) {
  return (
    <T>
      Translate this text! Your name is: <Var>{user.name}</Var> // [!code highlight]
      <Var><p>Do not translate this text</p></Var> // [!code highlight]
    </T>
  );
}
```

## Notas [#notes]

* Los componentes variables mantienen el contenido dinámico no traducible fuera de las traducciones.
* Usa siempre [`<Var>`](/docs/react/reference/components/var) dentro de un [`<T>`](/docs/react/reference/components/t).
* Para aplicar un formato según la configuración regional, usa [`<Num>`](/docs/react/reference/components/num), [`<Currency>`](/docs/react/reference/components/currency) o [`<DateTime>`](/docs/react/reference/components/datetime).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.