# General Translation React SDKs (gt-react, gt-next, gt-react-native): Formatage des nombres et des dates
URL: https://generaltranslation.com/fr/docs/react/guides/formatting-variables.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment formater les nombres, devises, dates, temps relatif et valeurs dynamiques pour chaque paramètre régional dans React.

Chaque paramètre régional possède ses propres conventions de formatage des variables, telles que les nombres, les dates, les heures et les devises.

Utilisez le composant approprié pour les valeurs qui doivent s’adapter au paramètre régional actif, et [`<Var>`](/docs/react/reference/components/var) pour les valeurs dynamiques qui doivent s’afficher sans modification.

## Choisissez le composant approprié [#choose]

* [`<Var>`](/docs/react/reference/components/var) affiche une valeur dynamique sans la traduire ni la formater.
* [`<Num>`](/docs/react/reference/components/num) formate les nombres, les pourcentages et les unités selon le paramètre régional actif.
* [`<Currency>`](/docs/react/reference/components/currency) formate un montant et un code de devise sans en convertir la valeur.
* [`<DateTime>`](/docs/react/reference/components/datetime) formate une date, une heure ou les deux selon le paramètre régional actif.
* [`<RelativeTime>`](/docs/react/reference/components/relative-time) formate des expressions relatives telles que « hier » ou « dans 3 jours ».

Ces composants se comportent de la même manière dans React, Next.js, TanStack Start et React Native. Importez-les depuis le paquet de votre framework.

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

Utilisez [`<Var>`](/docs/react/reference/components/var) pour du contenu dynamique qui doit s’afficher exactement tel qu’il est fourni, comme un nom d’utilisateur, une adresse e-mail ou un identifiant. Au sein de [`<T>`](/docs/react/reference/components/t), ce composant empêche la traduction de la valeur tout en laissant la phrase environnante 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 le formatage des nombres et des montants adapté au paramètre régional. Importez les deux depuis le paquet de votre framework, aux côtés de [`<T>`](/docs/react/reference/components/t).

### Formater un nombre

Utilisez [`<Num>`](/docs/react/reference/components/num) pour formater les nombres avec des séparateurs de milliers, des pourcentages et des unités. Transmettez [`options`](/docs/react/reference/components/num#options) pour personnaliser le rendu.

```tsx
<T>
  <p>
    <Num>{count}</Num> downloads are complete.
  </p>
</T>;
```

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

### Formater les devises

Utilisez [`<Currency>`](/docs/react/reference/components/currency) avec un code ISO 4217 [`currency`](/docs/react/reference/components/currency#currency), comme `USD` ou `EUR`.

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

[`<Currency>`](/docs/react/reference/components/currency) utilise `USD` par défaut, mais transmettre [`currency`](/docs/react/reference/components/currency#currency) permet d’indiquer explicitement l’unité souhaitée. Il adapte le symbole, le regroupement et l’affichage des décimales aux paramètres régionaux ; il ne convertit pas les taux de change.

Transmettez [`options`](/docs/react/reference/components/currency#options) pour contrôler des détails tels que l’affichage de la devise, l’arrondi et la notation.

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

### Formater une date ou une heure absolue

Utilisez [`<DateTime>`](/docs/react/reference/components/datetime) pour les dates calendaires et les heures. Passez des [`options`](/docs/react/reference/components/datetime#options) pour définir le style de date, le style d’heure et le fuseau horaire.

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

### Formater un temps relatif

Utilisez [`<RelativeTime>`](/docs/react/reference/components/relative-time) avec une `Date` pour sélectionner automatiquement l’unité appropriée :

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

Pour un décalage connu, passez plutôt [`value`](/docs/react/reference/components/relative-time#value) et [`unit`](/docs/react/reference/components/relative-time#unit) :

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

Passez [`options`](/docs/react/reference/components/relative-time#options) pour choisir une formulation numérique ou naturelle, ainsi qu’un style long, court ou étroit.

Pour remplacer le paramètre régional actif, utilisez le composant à formater :

* [`<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.