Does React-intl support converting country names based on location?

Question

I am trying to display a list of country names based on locale. For instance, let's say we have a list of countries as the following:

United States, China, Japan, and France.

and you are a customer that browsing my website. If your account's locale is set as en_US, then you should see the English version of the countries lists. However, if your account's locale is ja_JP you should see the list in the Japanese version of the list, and so on.

Is that possible using React-intl? I am trying to solve this issue dynamically and not a hardcoded translation. I have searched a lot, but could not come up with a solution.

score 1 · Answer 1 · answered Oct 08 '17 at 07:44

I try react-intl for a while and I think it works like a charm. Actually, they give some functional examples which is worth to try.

Clone the repo.(https://github.com/yahoo/react-intl)
Run npm install or yarn install in root directory of the repo, this step will install some dependencies which will be used by example.
Go to the example dir and the translations dir.
Run npm build or yarn build
Visit localhost:8080 to see the results. You can switch langs between en-US and en-UPPER.

All these language sets is not hardcode in application code and save separately in the build/lang directory in a json format. I think react-intl can solve your problem!

score 0 · Answer 2 · answered Oct 08 '17 at 07:38

Since it's all about the data you don't need special React library. You can use just the data about the countries like here. It's in json with the following schema (I cut some fields, full example can be found here):

{
    "name": {
        "common": "Austria",
        "official": "Republic of Austria",
        "native": {
            "bar": {
                "official": "Republik Österreich",
                "common": "Österreich"
            }
        }
    },
    "cca2": "AT",
    "cca3": "AUT",
    "translations": {
        "deu": {"official": "Republik Österreich", "common": "Österreich"},
        "fra": {"official": "République d'Autriche", "common": "Autriche"},
        "ita": {"official": "Repubblica d'Austria", "common": "Austria"},
        "jpn": {"official": "オーストリア共和国", "common": "オーストリア"},
        "spa": {"official": "República de Austria", "common": "Austria"}
    },
}

Note, that although translations section uses ISO 639-3 codes and identification section uses ISO 3166-1 codes you can easily map them because native language section uses ISO 639-3 code.

Let's say you have to show a list of predefined countries. All you have to do is to get their cca3 codes and place them in a array. Then, when you identified your user locale in ISO 639-3 format (userLoc in the following example), you can use lodash or similar library to get corresponding translations:

// userLoc - current user locale in ISO 639-3
// codesToSelect - array of country codes in ISO 3166-1 you want to show

_.map( codesToSelect, ( cca3 ) => {

    let countryObject = _.find( countriesData, { 'cca3': cca3 } );

    let translatedName = ( countryObject && 
                           countryObject.translations && 
                           countryObject.translations[ userLoc ] )
        ? countryObject.translations[ userLoc ]
        : cca3

    return translatedName;
} )

Note, that there might not be a translation for a specified country code so cca3 will be used as a fallback.

Does React-intl support converting country names based on location?

2 Answers2