FormattedHtmlMessage react-intl v4

Question

After upgrading to react-intl@4, we are facing a problem with all formattedHtmlMessages which have been used as html tag.

<FormattedHTMLMessage id={`${page}.legalNotice`} />

We tried replacing by formattedMessage and tried values={{...}}

<FormattedMessage id={`${page}.legalNotice`} />

But first of all the html is not considered as html tags. Also as we use dynamic translation with different and undefined number of 'href's or even different 'target's on tags(links) it does not seem to be the solution.

Our translations are something similar to this:


"myPage1.legalNotice" : "By clicking here I accept <a target="_self" title="my specific title" href='first_link.pdf'>LINK1</a>, and <a target="_blank" title="second_title" href='second_link'>LINK2</a> and <a target="_blank" href='third_link' title='third_title'>LINK3</a>."

"myPage2.legalNotice" : "Another Text .. <a target="_blank" href='another_link.pdf'>LINK2</a>."

Adv150ry · Answer 1 · 2023-01-11T01:45:48.743

3

Check the Migration guide. https://formatjs.io/docs/react-intl/upgrade-guide-3x

You have to provide the description for all the tags you use inside the message.

<FormattedMessage
  defaultMessage="To buy a shoe, <a>visit our website</a> and <cta>eat a shoe</cta>"
  values={{
    a: msg => (
      <a class="external_link" target="_blank" href="https://www.shoe.com/">
        {msg}
      </a>
    ),
    cta: msg => <strong class="important">{msg}</strong>,
  }}
/>

Update: If you need to pass custom variables inside the variable

Assuming you have customHref or customTarget variables defined:

a: msg => (
  <a class="external_link" target="${customTarget}" href="${customHref}">
    {msg}
  </a>
)

edited Jan 11 '23 at 01:45

answered Jun 18 '20 at 18:37

Adv150ry

31
3

3

In my case can have different href or target. – Noon Jun 18 '20 at 18:48
I second what @Noon said: The link can be part of the translation. How do I access the href of the mentioned link? – Thorben Croisé Jan 03 '23 at 13:41
@Noon, you can configure what you are passing to href or target, as this is just a javascript variable at that point. Example, assuming `customHref` and `customTarget` available in the context: ```values={{ a: msg => ( {msg} ) ``` – Adv150ry Jan 11 '23 at 01:38

score 1 · Answer 2 · answered Jul 26 '22 at 10:28

To keep it the old way you can use such hack:

let message = intl.formatMessage({ id });
if (values) {
   Object.entries(values).forEach(([key, value]) => {
        message = message.replace(`{${key}}`, value.toString());
    });
}
return(
    <span 
         dangerouslySetInnerHTML={{ __html: formattedMessage }} 
    />
)

FormattedHtmlMessage react-intl v4

2 Answers2