# gt-react: General Translation React SDK: Composants variables
URL: https://generaltranslation.com/fr/docs/react/guides/variables.mdx
---
title: Composants variables
description: Comment utiliser les composants variables pour gérer du contenu dynamique dans les traductions
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier directement. Modifiez plutôt le template dans content/docs-templates/. */}

Les composants variables vous permettent d’inclure en toute sécurité du contenu dynamique dans les composants [`<T>`](/docs/react/api/components/t). Ils gèrent localement le formatage et la localisation sans envoyer de données à l’API de traduction, ce qui les rend particulièrement adaptés aux informations sensibles comme les noms d’utilisateur, les numéros de compte et les données financières.


## Composants disponibles

* [`<Var>`](/docs/react/api/components/var): Contenu dynamique brut, sans formatage
* [`<Num>`](/docs/react/api/components/num): Nombres avec un formatage selon le paramètre régional
* [`<Currency>`](/docs/react/api/components/currency): Valeurs monétaires avec symbole et formatage
* [`<DateTime>`](/docs/react/api/components/datetime): Dates et heures selon les conventions du paramètre régional

## Démarrage rapide

Les composants variables s’utilisent dans [`<T>`](/docs/react/api/components/t) pour gérer le contenu dynamique :

```jsx
import { T, Var, Num, Currency, DateTime } from 'gt-react';

function UserProfile({ user }) {
  return (
    <T>
      <p>Welcome back, <Var>{user.name}</Var>!</p>
      <p>You have <Num>{user.itemCount}</Num> items.</p>
      <p>Balance: <Currency currency="USD">{user.balance}</Currency></p>
      <p>Last login: <DateTime>{user.lastLogin}</DateTime></p>
    </T>
  );
}
```


## Fonctionnement des composants variables

Les composants variables résolvent le problème du contenu dynamique en :

1. **Encapsulant les valeurs dynamiques** pour pouvoir les utiliser dans [`<T>`](/docs/react/api/components/t)
2. **Gérant le formatage localement** à l’aide des API d’i18n intégrées au navigateur
3. **Préservant la confidentialité des données** — le contenu n’est jamais envoyé à l’API de traduction
4. **Adaptant la localisation** en fonction du paramètre régional actuel de l’utilisateur

```jsx
// ❌ Ceci échoue - contenu dynamique dans <T>
<T><p>Hello {username}</p></T>

// ✅ Ceci fonctionne - contenu dynamique encapsulé
<T><p>Hello <Var>{username}</Var></p></T>
```


## Guide des composants

### Var - Contenu dynamique brut

Utilisez [`<Var>`](/docs/react/api/components/var) pour tout contenu dynamique ne nécessitant pas de mise en forme particulière :

```jsx
// Informations utilisateur
<T>
  <p>Hello, <Var>{user.name}</Var>!</p>
  <p>Your account ID is <Var>{user.accountId}</Var></p>
</T>

// Rendu conditionnel
<T>
  Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>
```


### Num - Nombres mis en forme

Utilisez [`<Num>`](/docs/react/api/components/num) pour les nombres qui doivent respecter les règles de formatage du paramètre régional :

```jsx
// Formatage de base des nombres
<T>
  You have <Num>{itemCount}</Num> items in your cart.
</T>

// Utilisation autonome (équivalent à number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>

// Options de formatage personnalisées
<T>
  Distance: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T>
```


### Currency - Valeurs d&#39;argent

Utilisez [`<Currency>`](/docs/react/api/components/currency) pour les montants monétaires :

```jsx
// Formatage monétaire de base (USD par défaut)
<T>
  Your total is <Currency>{total}</Currency>.
</T>

// Différentes devises
<T>
  Price: <Currency currency="EUR">{price}</Currency>
</T>

// Formatage personnalisé
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>
```


### DateTime - Dates et heures

Utilisez [`<DateTime>`](/docs/react/api/components/datetime) pour les dates et heures :

```jsx
// Formatage de date de base
<T>
  Order placed on <DateTime>{orderDate}</DateTime>
</T>

// Formatage de l'heure
<T>
  Last updated: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// Format de date personnalisé
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>
```


## Confidentialité et sécurité

### Les données restent locales

Les composants variables gèrent toute la mise en forme localement à l’aide des [API Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) du navigateur. **Aucun contenu dynamique n’est envoyé à l’API de traduction**, ce qui les rend idéaux pour :

* Les noms d’utilisateur et les informations personnelles
* Les numéros de compte et les ID
* Les données financières et les soldes
* Les horodatages et les dates confidentiels

```jsx
// Sécurisé - les données sensibles restent en local
<T>
  Account balance: <Currency currency="USD">{balance}</Currency>
  Last login: <DateTime>{lastLoginTime}</DateTime>
</T>
```


### Exception importante

Attention aux composants [`<T>`](/docs/react/api/components/t) imbriqués dans des composants variables :

```jsx
// ⚠️ Le contenu <T> interne SERA envoyé pour traduction
<T>
  <Var>
    <T>Hello, world!</T>  {/* Ceci sera traduit */}
    {privateData}         {/* Ceci reste local */}
  </Var>
</T>
```


## Utilisation autonome

Les composants variables peuvent être utilisés en dehors de [`<T>`](/docs/react/api/components/t) pour du simple formatage :

```jsx
// Ces éléments fonctionnent comme leurs méthodes .toLocale*() respectives
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // formatage du prix
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()
```


## Problèmes courants

### Ignorer les options de localisation

Pour [`<Currency>`](/docs/react/api/components/currency), veillez à renseigner la prop `currency` afin de préciser le type de devise. Cela garantit que le bon symbole monétaire et le format approprié sont utilisés lors de l’affichage de la valeur :

```jsx
// ❌ USD par défaut - peut ne pas correspondre aux attentes des utilisateurs
<T>
  The item costs <Currency>{price}</Currency>
</T>

// ✅ Spécifier explicitement la devise
<T>
  The item costs <Currency currency="EUR">{price}</Currency>
</T>
```

D’autres composants ont également des props facultatives qui vous permettent de personnaliser le formatage :

```jsx
// Formatage de base
<T>
  <Num>{count}</Num> articles en stock
</T>

// Formatage personnalisé
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> taux d'achèvement
</T>

// Formatage de date
<T>
  Dernière mise à jour : <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>
```


## Étapes suivantes

* [Guide des composants Branch](/docs/react/guides/branches) - Ajoutez une logique conditionnelle à vos traductions
* [Guide de traduction des chaînes de caractères](/docs/react/guides/strings) - Traduisez du texte brut sans JSX
* Références API :
  * [Composant `<Var>`](/docs/react/api/components/var)
  * [Composant `<Num>`](/docs/react/api/components/num)
  * [Composant `<Currency>`](/docs/react/api/components/currency)