# General Translation React SDKs (gt-react, gt-next, gt-react-native): Formato de números y fechas
URL: https://generaltranslation.com/es/docs/react/guides/formatting-variables.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Cómo formatear números, monedas, fechas, tiempo relativo y valores dinámicos para cada configuración regional en React.

Cada configuración regional tiene sus propias convenciones para formatear variables como números, fechas, horas y monedas.

Usa el componente correspondiente para los valores que deben adaptarse a la configuración regional activa y usa [`<Var>`](/docs/react/reference/components/var) para los valores dinámicos que deben renderizarse sin cambios.

## Elige el componente adecuado [#choose]

* [`<Var>`](/docs/react/reference/components/var) muestra un valor dinámico sin traducirlo ni formatearlo.
* [`<Num>`](/docs/react/reference/components/num) formatea números, porcentajes y unidades según la configuración regional activa.
* [`<Currency>`](/docs/react/reference/components/currency) formatea un importe y un código de divisa sin convertir su valor.
* [`<DateTime>`](/docs/react/reference/components/datetime) formatea una fecha, una hora o ambas según la configuración regional activa.
* [`<RelativeTime>`](/docs/react/reference/components/relative-time) formatea expresiones relativas como &quot;ayer&quot; o &quot;dentro de 3 días&quot;.

Estos componentes tienen el mismo comportamiento en React, Next.js, TanStack Start y React Native. Impórtalos desde el paquete de tu framework.

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

Usa [`<Var>`](/docs/react/reference/components/var) para contenido dinámico que deba mostrarse exactamente como se proporciona, como un nombre de usuario, una dirección de correo electrónico o un identificador. Dentro de [`<T>`](/docs/react/reference/components/t), mantiene el valor fuera de la traducción y permite que la oración 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. Importa ambos desde el paquete de tu framework junto con [`<T>`](/docs/react/reference/components/t).

### Formatear un número

Usa [`<Num>`](/docs/react/reference/components/num) para separar miles, mostrar porcentajes y unidades. Pasa [`options`](/docs/react/reference/components/num#options) para personalizar el resultado.

```tsx
<T>
  <p>
    <Num>{count}</Num> descargas completadas.
  </p>
</T>;
```

```tsx
<Num options={{ style: 'percent', maximumFractionDigits: 0 }}>
  {completionRate}
</Num>
```

### Formatear moneda

Usa [`<Currency>`](/docs/react/reference/components/currency) con un código ISO 4217 de [`currency`](/docs/react/reference/components/currency#currency), como `USD` o `EUR`.

```tsx
<T>
  <p>
    Tu total es <Currency currency="EUR">{total}</Currency>.
  </p>
</T>;
```

[`<Currency>`](/docs/react/reference/components/currency) usa `USD` de forma predeterminada, pero al pasar [`currency`](/docs/react/reference/components/currency#currency) se especifica explícitamente la moneda deseada. Localiza el símbolo, la agrupación y la visualización de decimales; no convierte los tipos de cambio.

Pasa [`options`](/docs/react/reference/components/currency#options) para controlar detalles como la visualización de la moneda, el redondeo y la notación.

## Formatea 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;

### Formatea una fecha u hora específicas

Usa [`<DateTime>`](/docs/react/reference/components/datetime) para fechas de calendario y horas. Pasa [`options`](/docs/react/reference/components/datetime#options) para controlar el estilo de la fecha, el de la hora y la zona horaria.

```tsx
<T>
  <p>
    Published{' '}
    <DateTime
      options={{
        dateStyle: 'medium',
        timeStyle: 'short',
        timeZone: 'UTC',
      }}
    >
      {publishedAt}
    </DateTime>
    .
  </p>
</T>;
```

### Formatear el tiempo relativo

Usa [`<RelativeTime>`](/docs/react/reference/components/relative-time) con un objeto `Date` para seleccionar automáticamente la unidad adecuada:

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

Para un desfase conocido, pasa [`value`](/docs/react/reference/components/relative-time#value) y [`unit`](/docs/react/reference/components/relative-time#unit):

```tsx
<RelativeTime value={-3} unit="day" />
```

Pasa [`options`](/docs/react/reference/components/relative-time#options) para elegir entre una formulación numérica o natural, y un estilo largo, corto o estrecho.

Para reemplazar la configuración regional activa, elige el componente que vas a formatear:

* [`<Num>` `locales`](/docs/react/reference/components/num#locales)
* [`<Currency>` `locales`](/docs/react/reference/components/currency#locales)
* [`<DateTime>` `locales`](/docs/react/reference/components/datetime#locales)
* [`<RelativeTime>` `locales`](/docs/react/reference/components/relative-time#locales)

## Next steps

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

## Sitemap

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