Install and Configure the Entry Point of react-intl

Convert a Hard Coded String using react-intl FormattedMessage

Render Content with Placeholders using react-intl FormattedMessage

Render Content with Markup Using react-intl FormattedHTMLMessage

Format Date and Time Using react-intl FormattedDate and FormattedTime

Format a Date Relative to the Current Date Using react-intl FormattedRelative

Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

Render Content Based on a Number using react-intl FormattedMessage

Use a react-intl Higher Order Component to format messages and get current locale

Write tests for react-intl output using enzyme and Jest

Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

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

Using a `react-intl` `FormattedNumber` component, we'll pass a Number and a few additional props in order to render the correct separator and currency symbols for different languages.

https://app.egghead.io/api/v1/lessons/react-format-numbers-with-separators-and-currency-symbols-using-react-intl-formattednumber/subtitles

[00:01] We'll start by importing FormattedNumber from react-intl. We'll be formatting the prices of the book, ensuring that value separators and currency symbols are added in the appropriate places.

[00:14] First, let's take a look at some changes I've made to the mock data that's populating each book detail view. Instead of a single price, I've changed the price value to be an object with keys that correspond to the different languages that our app supports.

[00:30] The value of each is the price in their respective country. I'm going to get the same function to grab the user's locale as in our index file. We'll set that in our component. I'll just get rid of this merchant price text that we have set right now, and I'll replace that with a formatted number.

[00:56] Into the value prop, I'll add merchant.price. Since merchant.price is now an object, we need to look up the locale, so I'll provide the bracket notation and pass locale to it; locale here, in the bracket notation, will correspond to the locale that we're grabbing off the navigator object and will find the locale that corresponds to the price object in our book data file.

[01:27] Next, let's pass a prop of style. We'll give it a value of currency. We'll pass a currency display prop with a value of symbol to display the correct currency symbol. Finally, we need a currency prop, and this will tell react-intl which currency to display the price in.

[01:49] Since we want that dynamic display of the currency, we need to add a ternary operator, so I'll say locale triple equals the string of EN-US. If that's true, we want to return the currency of USD.

[02:06] Otherwise, we want to return the currency of EUR. If you had more locales or currencies to support, you could provide this prop a function that returns the correct currency, instead of just a ternary operator.

[02:21] That's it. You can see each language is now displaying the correct price and currency symbols.

Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

Share this video with your friends

Course

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