# General Translation React SDKs (gt-react, gt-next): Mise en forme des nombres et des dates
URL: https://generaltranslation.com/fr/docs/react/guides/formatting-variables.mdx
---

title: Mise en forme des nombres et des dates
description: Comment insérer dans le contenu de General Translation des nombres, devises, dates et variables adaptés au paramètre régional dans React, Next.js, TanStack Start et 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

---

Les valeurs dynamiques dans le contenu traduit doivent être balisées pour ne pas être envoyées à la traduction, et les valeurs mises en forme doivent respecter le paramètre régional du lecteur. General Translation fournit des composants variables pour ces deux usages. Ces composants reposent sur le même socle dans tous les frameworks — seul le package d’importation diffère.

## Insérer une valeur brute avec `<Var>` [#var]

Utilisez [`<Var>`](/docs/react/reference/components/var) pour du contenu dynamique qui doit être affiché tel quel, comme un nom d’utilisateur. Ce composant marque la valeur comme une variable afin que le texte environnant reste traduisible.

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

## Formater les nombres et les montants [#numbers]

Utilisez [`<Num>`](/docs/react/reference/components/num) et [`<Currency>`](/docs/react/reference/components/currency) pour formater les nombres et les montants selon le paramètre régional. Les deux acceptent des options `Intl` et sont importés depuis le package de votre framework, aux côtés de [`<T>`](/docs/react/reference/components/t).

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

`<Currency>` utilise `USD` par défaut ; passez `currency` pour utiliser un autre code. Il met en forme la valeur selon le paramètre régional, mais ne convertit pas les devises.

## Formater les dates et heures [#dates]

Utilisez [`<DateTime>`](/docs/react/reference/components/datetime) pour les dates et heures absolues, et [`<RelativeTime>`](/docs/react/reference/components/relative-time) pour les valeurs relatives telles que &quot;il y a 3 jours&quot;. Les deux acceptent les options de formatage `Intl`, ainsi qu’une surcharge facultative de `locales`.

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

`<RelativeTime>` peut aussi accepter des `value` et `unit` explicites (par exemple `value={-3}` avec `unit="day"`) au lieu d’une date.

Consultez la [référence des composants](/docs/react/reference/components/num) pour connaître toutes les props acceptées par ces composants.
## Next steps

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