CODEWITHSUNDEEP
reactjsreact-intlformatted-text
Noon
Noon

Reputation: 149

FormattedHtmlMessage react-intl v4

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>."

Upvotes: 4

Views: 8687

Answers (2)

Adv150ry
Adv150ry

Reputation: 31

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>
)

Upvotes: 3

Malpie
Malpie

Reputation: 9

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 }} 
    />
)

Upvotes: 0

Related Questions