# General Translation React SDKs (gt-react, gt-next): Formato de números y fechas
URL: https://generaltranslation.com/es/docs/react/guides/formatting-variables.mdx
---

title: Formato de números y fechas
description: Cómo insertar números, monedas, fechas y variables según la configuración regional en contenido de General Translation en React, Next.js, TanStack Start y React Native.
related:
  links:
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/managing-locales

---

Los valores dinámicos dentro del contenido traducido deben marcarse para que no se envíen a traducir, y los valores con formato deben respetar la configuración regional del lector. General Translation proporciona componentes variables para ambos casos. Estos componentes provienen del mismo núcleo en todos los frameworks; solo cambia el paquete de importación.

## Inserta un valor sin formato con `<Var>` [#var]

Usa [`<Var>`](/docs/react/reference/components/var) para contenido dinámico que deba mostrarse tal cual, como el nombre de un usuario. Marca el valor como una variable para que el texto que lo rodea siga siendo traducible.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T, Var } from 'gt-react';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T, Var } from 'gt-next';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T, Var } from 'gt-tanstack-start';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T, Var } from 'gt-react-native';

    <T>
      <Text>Signed in as <Var>{user.email}</Var></Text>
    </T>;
    ```
  </Tab>
</Tabs>

## Formatea números y moneda [#numbers]

Usa [`<Num>`](/docs/react/reference/components/num) y [`<Currency>`](/docs/react/reference/components/currency) para formatear números e importes monetarios según la configuración regional. Ambos aceptan opciones de `Intl` y se importan desde el paquete de tu framework junto con [`<T>`](/docs/react/reference/components/t).

```tsx
<T>
  <p>You have <Num>{count}</Num> items totaling <Currency currency="USD">{total}</Currency>.</p>
</T>;
```

`<Currency>` usa `USD` de forma predeterminada; pasa `currency` si quieres otro código. Da formato al valor según la configuración regional, pero no convierte entre monedas.

## Da formato a fechas y horas [#dates]

Usa [`<DateTime>`](/docs/react/reference/components/datetime) para fechas y horas absolutas, y [`<RelativeTime>`](/docs/react/reference/components/relative-time) para valores relativos como &quot;hace 3 días&quot;. Ambos aceptan opciones de formato de `Intl` y una sobrescritura opcional de `locales`.

```tsx
<T>
  <p>Published <DateTime>{publishedAt}</DateTime> (<RelativeTime>{publishedAt}</RelativeTime>).</p>
</T>;
```

`<RelativeTime>` también puede aceptar un `value` y una `unit` explícitos (por ejemplo, `value={-3}` con `unit="day"`) en lugar de una fecha.

Consulta la [referencia de componentes](/docs/react/reference/components/num) para ver todas las props que aceptan estos componentes.
## Next steps

- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales