# General Translation React SDKs (gt-react, gt-next): Var
URL: https://generaltranslation.com/fr/docs/react/reference/components/var.mdx
---

title: Var
description: Affiche une valeur dynamique dans une traduction sans la traduire, avec General Translation gt-react. Référence de l’API pour Var.

---

Le composant `<Var>` affiche du contenu dynamique qui ne doit pas être traduit. Utilisez-le pour des valeurs, des extraits de code ou des informations privées telles que des clés API ou des données personnelles, afin que le texte environnant reste traduisible.

*Disponible dans `gt-react`, `gt-next`, `gt-tanstack-start` et `gt-react-native`. Les exemples importent depuis `gt-react` ; importez plutôt depuis le package de votre framework.*

## Vue d’ensemble [#overview]

Placez `<Var>` dans un [`<T>`](/docs/react/reference/components/t) pour indiquer qu’une valeur est une variable. La valeur est affichée telle quelle, et le reste de la phrase est traduit autour d’elle.

```tsx
<T>
  Your name is <Var>{user.name}</Var>.
</T>
```

*Remarque : `<Var>` est toujours utilisé à l’intérieur d’un `<T>`. Considérez-le comme l’élément passe-partout pour les valeurs dynamiques qui ne correspondent ni à [`<Num>`](/docs/react/reference/components/num), ni à [`<Currency>`](/docs/react/reference/components/currency), ni à [`<DateTime>`](/docs/react/reference/components/datetime).*

## Fonctionnement [#how-it-works]

* **Exclu de la traduction.** Le contenu de `<Var>` n’est pas envoyé à l’API de General Translation. Il est affiché exactement tel qu’il est transmis, ce qui préserve les valeurs dynamiques ou sensibles.
* **Préserve la traduction du texte environnant.** Marquer une valeur comme variable permet au texte autour de rester une seule entrée traduisible, la variable étant insérée à la bonne place pour chaque paramètre régional.

## Props [#props]

| Prop                    | Description                                                | Type        | Facultatif | Par défaut |
| ----------------------- | ---------------------------------------------------------- | ----------- | ---------- | ---------- |
| [`children`](#children) | La valeur à afficher, sans traduction.                     | `ReactNode` | Non        | —          |
| [`name`](#name)         | Nom de variable de l’entrée, utilisé pour les métadonnées. | `string`    | Oui        | —          |

### `children` [#children]

**Type** `ReactNode` · **Obligatoire**

Le contenu à afficher dans le composant. Il est transmis tel quel et n’est jamais traduit.

### `name` [#name]

**Type** `string` · **Facultatif**

Nom facultatif de la variable, utilisé comme métadonnée et pour identifier la valeur dans l’entrée de traduction.

## Exemples [#examples]

```tsx title="Address.tsx"
import { T, Var } from 'gt-react';

export default function Example({ user }) {
  return (
    <T>
      Translate this text! Your name is: <Var>{user.name}</Var> // [!code highlight]
      <Var><p>Do not translate this text</p></Var> // [!code highlight]
    </T>
  );
}
```

## Notes [#notes]

* Les composants variables permettent d’exclure des traductions le contenu dynamique non traduisible.
* Utilisez toujours `<Var>` dans un `<T>`.
* Pour un formatage adapté au paramètre régional, utilisez plutôt [`<Num>`](/docs/react/reference/components/num), [`<Currency>`](/docs/react/reference/components/currency) ou [`<DateTime>`](/docs/react/reference/components/datetime).