Rich text

Vous pouvez intégrer des balises dans des chaînes, par exemple :

import { defineMessages } from '@jutro/locale';

export default defineMessages({
  boldItalics: {
    id: 'appName.component.id.boldAndItalics',
    defaultMessage:
      'This text is <b>bolded</b>, and this text is <i>italicized</i>.',
  },
});

Par la suite, lorsque vous utilisez réellement la chaîne, vous devez utiliser un contexte de traduction et gérer le balisage dans le second argument, comme suit :

import { useTranslator } from '@jutro/locale';
const translator = useTranslator();

translator(messages.boldItalics, {
  b: (chunks) => <b>{chunks}</b>,
  i: (chunks) => <i>{chunks}</i>,
});

Output:

This text is bolded, and this text is italicized.

Note: les balises dans la chaîne source sont arbitraires. Elles peuvent être mappées vers n'importe quel élément dans le contexte de traduction.

De même, pour une chaîne telle que celle-ci :

linkedText: {
        id: 'appName.component.id.linkedText',
        defaultMessage: 'View our privacy policy <a>here</a>'
    }

Le lien peut-être traité comme suit :

translator(
    messages.linkedText,
    {a: chunks => <a href="/privacyPolicy">{chunks}</a>}
    )

Notez que dans ce scénario, toute la chaîne se traduit, mais pas l'URL du lien (si l'un a des liens qui dépendent de la langue).