# gt-next: General Translation Next.js SDK: InlineTranslationOptions
URL: https://generaltranslation.com/fr/docs/next/api/types/inline-translation-options.mdx
---
title: InlineTranslationOptions
description: Référence de l’API pour le type InlineTranslationOptions
---

## Vue d’ensemble

Le type `InlineTranslationOptions` sert à transmettre des variables aux traductions en ligne et à définir leur comportement de rendu.
Vous pouvez également ajouter un contexte et un identifiant à la traduction.
Il est utilisé avec [`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) et [`msg`](/docs/next/api/strings/msg) pour transmettre des variables aux traductions en ligne de chaînes.

<Callout>
  **Traduction au moment du build :**
  Les variables ne sont pas traduites avec `useGT`, `getGT` et `msg` ; seule la chaîne d’origine l’est.
  Consultez [`tx`](/docs/next/api/strings/tx) pour traduire des chaînes contenant du contenu dynamique.
</Callout>

## Référence

### Paramètres

<TypeTable
  type={{
  "[variable]?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "$context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$maxChars?": {
      type: 'number',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Description

| Prop         | Description                                                                                                                                                                       |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `[variable]` | Les variables sont transmises comme clés de premier niveau dans l’objet d’options. Les noms de clé correspondent aux espaces réservés dans la chaîne (par exemple, `{username}`). |
| `$context`   | Fournit du contexte pour le contenu afin d’orienter la traduction.                                                                                                                |
| `$id`        | Fournit un identifiant à utiliser avec l’éditeur de traduction.                                                                                                                   |
| `$maxChars`  | Limite le nombre de caractères de la traduction. La bibliothèque applique strictement cette limite.                                                                               |

***

## Exemples

### Contexte

Pour ajouter du contexte à la chaîne de caractères, nous utilisons la prop `$context`.

```jsx title="Component.tsx"
// [!code word:$context]
import { useGT } from 'gt-next';

const Component = () => {
  const gt = useGT();
  return <div>{gt('Hello, world!', { $context: 'une salutation formelle' })}</div>;
};
```


### Passage de variables

Pour ajouter une variable à la chaîne, on utilise la syntaxe `{variable-name}`, où le nom de la variable est entouré d’accolades.

```jsx title="Component.tsx"
// [!code word:username]
import { useGT } from 'gt-next';

const Component = () => {
  const gt = useGT();
  return <div>{gt('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};
```


### Utiliser le format de message ICU

`gt-next` prend en charge le format de message ICU, ce qui vous permet aussi de mettre en forme vos variables.

```jsx title="Component.tsx"
// [!code word:account-balance]
import { useGT } from 'gt-next';

const Component = () => {
  const gt = useGT();
  return <div>
    { gt(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};
```

Consultez la [documentation du format de message ICU](https://unicode-org.github.io/icu/userguide/format_parse/messages/) pour en savoir plus sur le format de message ICU.


### Limites de caractères

Utilisez `$maxChars` pour limiter la longueur de la traduction :

```jsx title="Component.tsx"
// [!code word:$maxChars]
import { useGT } from 'gt-next';

const Component = () => {
  const gt = useGT();
  return <div>{gt('Welcome to our application', { $maxChars: 15 })}</div>; 
  // Output: "Bienvenue à no\u202F…"
};
```

***


## Remarques

* `InlineTranslationOptions` est utilisé pour les traductions de chaîne en ligne.
* Les variables sont transmises comme clés de premier niveau dans l’objet d’options, et non sous une clé `variables`.

## Étapes suivantes

* Consultez [`useGT`](/docs/next/api/strings/use-gt) et [`getGT`](/docs/next/api/strings/get-gt) pour en savoir plus sur les traductions de chaînes en ligne.
* Consultez le [`format de message ICU`](https://unicode-org.github.io/icu/userguide/format_parse/messages/) pour en savoir plus sur les options de formatage.