Rich text

You can embed markup in strings, like:

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>.',
  },
});

Subsequently, when you actually use the string, you must use a TranslatorContext, and handle the markup in the second argument, like:

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

Output:

This text is bolded, and this text is italicized.

Note: the tags in the source string are arbitrary. They can be mapped to anything in the TranslatorContext.

Similarly, given a string like this:

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

The link can be dealt with like:

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

Note that in this scenario, the entire string is translatable - but the link URL is not. (in case one had language sensitive links)