Texte riche et interpolation

Quand une chaîne traduite porte du balisage ou une valeur, vous la rendez avec <Trans>. C'est le seul composant de texte riche du SDK.

Le cas courant

Importez Trans depuis @sonenta/react-i18next. Les variables viennent de values, les balises de components.

import { Trans } from "@sonenta/react-i18next";

<Trans
  i18nKey="cta.terms"
  defaults="Hi {{name}}, please accept the <bold>terms</bold>."
  values={{ name: "Marc" }}
  components={{ bold: <strong /> }}
/>

Ce que cela rend réellement

Hi Marc, please accept the <strong>terms</strong>.

Deux façons de mapper les composants

components accepte un objet, comme ci-dessus, où la clé est le nom de balise. Il accepte aussi un tableau, auquel cas les balises de la chaîne sont numérotées (<0>, <1>, …). L'objet est plus lisible quand un traducteur doit relire la chaîne : <bold> se comprend, <0> non.

Toute balise d'une chaîne doit être mappée

Une balise présente dans une valeur traduite mais absente de components ne disparaît pas, et elle n'est pas interprétée. Elle est échappée, donc affichée telle quelle à l'utilisateur.

Valeur traduite :

Read this <foreign lang="en">as-is</foreign> please.

Ce que votre utilisateur voit à l'écran, si foreign n'est pas mappé :

Read this <foreign lang="en">as-is</foreign> please.

C'est un comportement voulu, pas un bug : le SDK ne devine jamais quel composant vous vouliez. Mais c'est visible en production, donc mappez chaque balise que vos traducteurs peuvent produire.

Conserver le bon namespace

Passez le t du useTranslation(ns) englobant avec <Trans t={t} …>. Sans lui, la phrase peut se résoudre sur un autre namespace que celui que vous croyez, et vous obtenez la clé brute ou la valeur d'un homonyme.

const { t } = useTranslation("checkout");

<Trans t={t} i18nKey="cta.terms" components={{ bold: <strong /> }} />

Toutes les props de `<Trans>`

Treize props, aucune n'est requise. En pratique il vous faut i18nKey, plus defaults tant que la clé n'est pas encore publiée.

i18nKey, ns, namespace, defaults, values, components, count, context, tOptions, shouldUnescape, parent, t, children.

Ensuite

React : retour au guide d'intégration
Imbrication des clés : clés à plat ou imbriquées