md`# Dealing with Internationalizing Currency Names
I work for a financial company that's getting on the internationalization (i18n) bandwagon and my team is the one providing i18n support for product teams. On a regular basis, we get asked questions like **Do I need to localize CSV or PDF?** and **Do I need to internationalize even if all my users are from the UK?**.
This is basically my daily work life. 😂 Finding answers to people's questions and making sure that the answers are correct (or makes sense at least). This is my first time working on i18n and everyday I learn something new !
A developer asked, how can they display a localized value for a currency name in their React app.
Well, in the olden days, I will probably do the following steps...
1. **Define what locales you support.** Let's say I want to offer my application to 50 countries. That would be 50 locales at least, not counting the other major languages used in those countries (e.g. en-CA and fr-CA in Canada).
2. **Create a file containing mappings of currency code to localized currency names for each locale supported.** Imagine the number of files you need to create and maintain! *There's probably a library in npm that does all this.*
3. **Include all files in your bundle and find ways to efficiently load locale data.**
4. **Add i18n support to UI component.**
<hr>
Here is an example...
`
viewof localeSelector = {
const localeSelector = select({
title: "Select a locale value.",
options: [
{ label: "en-US (US English)", value: "en-US" },
{ label: "en-GB (British English)", value: "en-GB" },
{ label: "ja-JP (Japanese)", value: "ja-JP" },
{ label: "ko-KR (Korean)", value: "ko-KR" },
{ label: "fr-CA (French spoken in Canada)", value: "fr-CA" }
]
});
localeSelector.input.style.fontSize = "15px";
return localeSelector;
}
viewof currencySelector = {
const currencySelector = select({
title: "Select a currency code.",
options: ["AUD", "EUR", "CNY", "PHP", "GBP"]
});
currencySelector.input.style.fontSize = "15px";
return currencySelector;
}
// Assuming that json data containing the mappings looks like this
dataset = {
return {
"en-US": {
AUD: "Australian Dollar",
EUR: "Euro",
CNY: "Chinese Yuan",
PHP: "Philippine Peso",
GBP: "British Pound"
},
"en-GB": {
AUD: "Australian Dollar",
EUR: "Euro",
CNY: "Chinese Yuan",
PHP: "Philippine Peso",
GBP: "British Pound"
},
"ja-JP": {
AUD: "オーストラリア ドル",
EUR: "ユーロ",
CNY: "中国人民元",
PHP: "フィリピン ペソ",
GBP: "英国ポンド"
},
"ko-KR": {
AUD: "호주 달러",
EUR: "유로",
CNY: "중국 위안화",
PHP: "필리핀 페소",
GBP: "파운드"
},
"fr-CA": {
AUD: "dollar australien",
EUR: "euro",
CNY: "yuan renminbi chinois",
PHP: "peso philippin",
GBP: "livre sterling"
}
};
}
getLocalizedCurrencyName = {
return dataset[localeSelector][currencySelector];
}
html`The currency name for <strong>${currencySelector}</strong> in <strong>${localeSelector}</strong> is... <h3>${getLocalizedCurrencyName}</h3>`
md`
<hr>
But!!! There is a better way! In JavaScript, there is an [Intl API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) that provides developers easy access to contructors that makes internationalization work easier.
What we want in this case is [Intl.DisplayNames](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames). It provides translations of language, region, script and currency names as of the moment.
Using Intl.DisplayNames, the four-step process becomes two steps lesser. And the biggest win is not having to create all those currency code to name mappings for each supported locale, instead, use what is already provided by the browser which definitely lessens localization costs.
So how is it implemented? Just use it directly in a JavaScript app. There's no need to import anything. You can also checkout [FormatJS](https://formatjs.io/). That is what we currently use and I'm personally pretty happy with it. 🤞
Luckily, you don't have to import anything in Observable! 🎉You can directly use the Intl API in Observable which I find really cool! 😎
Using the same dropdown selectors for locale and currency code, we can replicate the functionality without using the custom method we created.
`
html`Using Intl.DisplayNames, the currency name for <strong>${currencySelector}</strong> in <strong>${localeSelector}</strong> is... <h3>${new Intl.DisplayNames(
localeSelector,
{ type: "currency" }
).of(currencySelector)}</h3>`
import {select} from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
