# react-native: Var
URL: https://generaltranslation.com/fr/docs/react-native/api/components/var.mdx
---
title: Var
description: Référence API du composant Var
---

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


## 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 tout autre contenu qui ne doit pas être traduit.
C’est également utile pour afficher du contenu qui doit rester privé, comme des clés 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 fourre-tout 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 à l’intérieur du composant. S’il est fourni, il 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

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

***

## Exemples

### Exemple de base

Le composant `<Var>` doit être utilisé dans un composant `<T>`.

```jsx title="Address.jsx" copy
import { T, Var } from 'gt-react-native'

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 variables sont essentiels pour préserver, dans les traductions, le contenu dynamique qui ne doit pas être traduit.
* Utilisez toujours des composants variables dans un composant `<T>`.
* Des composants comme `<Num>`, `<Currency>` et `<DateTime>` offrent des fonctions de localisation qui garantissent un formatage correct.

## Étapes suivantes

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