Le composant <T>

Enveloppe ton contenu dans le composant <T> pour le traduire.

<T>This content will be translated</T>

Props

Variables

Enveloppe les valeurs qui changent, comme un nom ou un nombre, dans v() :

import { T, v } from '@magic-translate/react';

<T>
  Hello {v(user.name)}, you have {v(count)} unread messages
</T>

Magic Translate traduit le texte autour des valeurs une fois, par Hello {0}, you have {1} unread messages, et les réintègre dans ton application. La traduction est mise en cache et fonctionne pour tous les noms et tous les comptes, et les valeurs elles-mêmes ne sont jamais envoyées à Magic Translate.

Les valeurs sont numérotées dans l'ordre dans lequel elles apparaissent. La traduction peut les déplacer là où la langue en a besoin, par exemple {1} ungelesene Nachrichten für {0}.

v() peut également contenir un composant React, tel qu'un lien :

<T>
  Read our {v(<Link href="/terms">terms</Link>)} before you continue.
</T>

Le texte du lien n'est donc pas traduit. Pour le traduire également, mets-le dans son propre <T> : v(<Link href="/terms"><T>terms</T></Link>).

Sans v(), une valeur est traduite en même temps que le texte qui l'entoure. Cela fonctionne, mais chaque valeur différente est une traduction distincte qui compte pour ton utilisation.

Limites

1. Tu ne peux pas insérer de composants React dans le composant <T>, sauf dans v(). Les éléments HTML simples conviennent (voir l'exemple ci-dessous).
2. Le contenu d'un composant <T> ne peut pas dépasser 10 Ko, soit environ 5 000 caractères.

{/* this is OK, since <a> is a plain HTML element */}
<T>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</T>

{/* this does NOT work, since <MyButton> is a React component */}
<T>
  <MyButton>Click me</MyButton>
</T>