[React Intl] Render Content with Placeholders using react-intl FormattedMessage

Posted 2020-09-30 Answer1215

Learn how to use react-intl to set dynamic values into your language messages. We’ll also learn how to pass in those values by using a values prop in the react-intl FormattedMessage component.

We‘ll also take a look at how to pass values with markup and still get all the benefits of translation.

 

Pass the ‘values‘ porp to the FormattedMessage:

          <h3>
            <FormattedMessage id="detail.author" values={{
              author: book.author
            }} />
          </h3>

 

For translations:

  ‘en-US‘: {
    detail: {
      author: ‘by {author}‘
    }
  },

 

It also supports pass in markdown as param:

              <p>
                <FormattedMessage id="detail.userRating" values={{
                  name: <strong>{review.name}</strong>,
                  rating: review.rating
                }}/><br />
                {new Date(review.date).toLocaleDateString()}
              </p>

  ‘en-US‘: {
    detail: {
      userRating: ‘{name} rated it: {rating} out of 5‘
    }
  },