# gt-next: General Translation Next.js SDK: Var
URL: https://generaltranslation.com/fr/docs/next/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 plutôt le template 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 tout autre contenu qui ne doit pas être traduit.
Cela permet aussi d’afficher du contenu qui doit rester privé, comme des clés API ou des informations personnelles.

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

Le composant `<Var>` est toujours utilisé à l’intérieur d’un composant `<T>`.
Considérez-le comme un composant générique pour les valeurs dynamiques qui n’entrent pas dans 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. |

### Renvoie

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

***

## Exemples

### Exemple simple

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

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

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 conserver, 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 fonctionnalités de localisation pour garantir un formatage correct.

## Étapes suivantes

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