# gt-next: General Translation Next.js SDK: Var
URL: https://generaltranslation.com/es/docs/next/api/components/var.mdx
---
title: Var
description: Referencia de la API del componente Var
---

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


## Resumen

El componente `<Var>` se utiliza 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 sirve para renderizar contenido que debe mantenerse privado, como claves de 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 componente genérico para valores dinámicos que no encajan en la categoría de `<Currency>`, `<DateTime>` o `<Num>`.


## Referencia

### Propiedades

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

### Descripción

| Prop       | 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-next'

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 de variable son esenciales para mantener en las traducciones el contenido dinámico que no debe traducirse.
* Usa siempre los componentes de variable dentro de un componente `<T>`.
* Componentes como `<Num>`, `<Currency>` y `<DateTime>` ofrecen funciones de localización para garantizar un formato preciso.

## Siguientes pasos

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