# gt-react: General Translation React SDK: Var
URL: https://generaltranslation.com/fr/docs/react/api/components/var.mdx
---
title: Var
description: Référence de l’API du composant Var
---

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


## Vue d’ensemble

Le composant `<Var>` sert à afficher du contenu qui ne doit pas être traduit.
C’est utile pour afficher des variables, des extraits de code ou d’autres contenus qui ne doivent pas être traduits.
C’est également utile pour afficher du contenu qui doit rester privé, comme des clés d’API ou des informations personnelles.

```jsx
<Var>{user.name}</Var>
```

Le composant `<Var>` s’utilise toujours à l’intérieur d’un composant `<T>`.
Considérez-le comme un composant générique pour les valeurs dynamiques qui ne relèvent pas de la catégorie de `<Currency>`, `<DateTime>` ou `<Num>`.


## Référence

### Props

<TypeTable
  type={{
      "children?": {
          type: 'JSX.Element',
          optional: true,
          default: 'undefined',
      },
      "name?": {
          type: 'string',
          optional: true,
          default: 'undefined',
      },
      "value?": {
          type: 'string',
          optional: true,
          default: 'undefined',
      },
  }}
/>

### Description

| Prop       | Description                                                                                                  |
| ---------- | ------------------------------------------------------------------------------------------------------------ |
| `children` | Le contenu à afficher dans le composant. Si cette prop est fournie, elle prévaut sur `value`.                |
| `value`    | Valeur par défaut facultative à afficher si `children` n’est pas fourni. Peut être une chaîne de caractères. |

### Renvoie

`JSX.Element` contenant le contenu qui ne doit pas être traduit.

***

## Exemples

### Exemple de base

Le composant `<Var>` doit être utilisé à l’intérieur du composant `<T>`.

```jsx title="Address.jsx" copy
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>
  );
}
```

***


## Remarques

* Les composants de variables sont essentiels pour préserver, dans les traductions, le contenu dynamique qui ne doit pas être traduit.
* Utilisez toujours des composants de variables dans un composant `<T>`.
* Des composants comme `<Num>`, `<Currency>` et `<DateTime>` offrent des fonctionnalités de localisation pour garantir un formatage correct.

## Étapes suivantes

* Pour une présentation plus détaillée et des exemples d’utilisation du composant `<Var>` et d’autres composants de variable comme `<Currency>`, `<DateTime>` et `<Num>`, consultez la documentation [Utilisation des composants de variable](/docs/react/guides/variables).