# gt-react: General Translation React SDK: Var
URL: https://generaltranslation.com/es/docs/react/api/components/var.mdx
---
title: Var
description: Referencia de la API para el componente Var
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## Resumen

El componente `<Var>` se usa para renderizar contenido que no debe traducirse.
Esto resulta útil para renderizar variables, fragmentos de código u otro contenido que no deba traducirse.
Además, también es útil para renderizar contenido que debe mantenerse privado, como claves API o información personal.

```jsx
<Var>{user.name}</Var>
```

El componente `<Var>` siempre se usa dentro de un componente `<T>`.
Piensa en él como un comodín para valores dinámicos que no encajan en la categoría de `<Currency>`, `<DateTime>` o `<Num>`.


## Referencia

### Props

<TypeTable
  type={{
      "children?": {
          type: 'JSX.Element',
          optional: true,
          default: 'undefined',
      },
      "name?": {
          type: 'cadena',
          optional: true,
          default: 'undefined',
      },
      "value?": {
          type: 'cadena',
          optional: true,
          default: 'undefined',
      },
  }}
/>

### Descripción

| Propiedad  | Descripción                                                                                             |
| ---------- | ------------------------------------------------------------------------------------------------------- |
| `children` | El contenido que se renderiza dentro del componente. Si se proporciona, tendrá prioridad sobre `value`. |
| `value`    | Valor predeterminado opcional que se mostrará si no se proporciona `children`. Puede ser una cadena.    |

### Devuelve

`JSX.Element` que contiene el contenido que no se debe traducir.

***

## Ejemplos

### Ejemplo básico

El componente `<Var>` debe usarse dentro de un componente `<T>`.

```jsx title="Address.jsx" copy
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

* Los componentes Variable son esenciales para mantener contenido dinámico no traducible en las traducciones.
* Usa siempre componentes Variable dentro de un componente `<T>`.
* Componentes como `<Num>`, `<Currency>` y `<DateTime>` ofrecen funciones de localización para garantizar un formato preciso.

## Próximos pasos

* Para consultar una explicación más detallada y ejemplos de uso del componente `<Var>` y de otros componentes Variable, como `<Currency>`, `<DateTime>` y `<Num>`, consulta la documentación [Uso de componentes Variable](/docs/react/guides/variables).