1
Install and Configure the Entry Point of react-intl
4m 21s
2
Convert a Hard Coded String using react-intl FormattedMessage
4m 11s
3
Render Content with Placeholders using react-intl FormattedMessage
3m 35s
4
Render Content with Markup Using react-intl FormattedHTMLMessage
1m 20s
5
Format Date and Time Using react-intl FormattedDate and FormattedTime
2m 21s
6
Format a Date Relative to the Current Date Using react-intl FormattedRelative
2m 11s
7
Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
2m 28s
8
Render Content Based on a Number using react-intl FormattedMessage
3m 36s
9
Use a react-intl Higher Order Component to format messages and get current locale
3m 32s
10
Write tests for react-intl output using enzyme and Jest
7m 30s
11
Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers
3m 10s

Render Content with Placeholders using react-intl FormattedMessage

React15 - 16.8.4

Share this video with your friends

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.

Course

Add Internationalization (i18n) to a React app using React Intl

firaskrichi

~ 7 years ago

How does your approach compare to extracting strings from <FormattedMessage /> as explained here: https://medium.freecodecamp.org/internationalization-in-react-7264738274a0