# General Translation React SDKs (gt-react, gt-next): Formatting numbers and dates
URL: https://generaltranslation.com/en-GB/docs/react/guides/formatting-variables.mdx
---

title: Formatting numbers and dates
description: How to insert locale-aware numbers, currencies, dates and variables into General Translation content across React, Next.js, TanStack Start and 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

---

Dynamic values inside translated content need to be marked so they are not sent for translation, and formatted values need to respect the reader's locale. General Translation provides variable components for both. These components come from the same core across every framework — only the import package differs.

## Insert a raw value with `<Var>` [#var]

Use [`<Var>`](/docs/react/reference/components/var) for dynamic content that should render as-is, such as a user name. It marks the value as a variable so the surrounding text stays translatable.

<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>

## Format numbers and currency [#numbers]

Use [`<Num>`](/docs/react/reference/components/num) and [`<Currency>`](/docs/react/reference/components/currency) for locale-aware number and money formatting. Both accept `Intl` options, and both are imported from your framework&#39;s package alongside [`<T>`](/docs/react/reference/components/t).

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

`<Currency>` defaults to `USD`; pass `currency` for another code. It formats the value for the locale but does not convert between currencies.

## Format dates and times [#dates]

Use [`<DateTime>`](/docs/react/reference/components/datetime) for absolute dates and times, and [`<RelativeTime>`](/docs/react/reference/components/relative-time) for relative values such as &quot;3 days ago&quot;. Both accept `Intl` formatting options and an optional `locales` override.

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

`<RelativeTime>` can also take an explicit `value` and `unit` (for example `value={-3}` with `unit="day"`) instead of a date.

See the [Components reference](/docs/react/reference/components/num) for every prop these components accept.
## Next steps

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