This section covers localizing your MiniApp to the user's device's language settings.
Typical data types to localize.
- Static strings
- Assets(images, video, etc.)
- Data from API calls
Getting the preferred language(s) from the device
Get the locale value from Navigator
There is getLocale function under ./utils/getLocale.js
In the response to this function we look for navigator.language property. It typically looks like this 'en-US', 'ja-JP'
The first two characters are the language property (what we want right now. The second two are the locale (country or region).
Double check the language property works for you
Your MiniApp may support specific languages, but the user's device may not be set to one of them. To solve for this, please ensure that you specify a backup should the user's preferred languages not match any language you support.
React JS:The following instructions are tailored to React JS. The specific steps for other frameworks will vary, but the concept is the same.
Localizing static strings
The following steps are required to localize static strings throughout the app
- Identify all the static text in your app that needs to be translated
- Create the folder "translation" under your source code's root directory (src).
- Create .json files for each locale you are planning for e.g. en.json for English, ja.json for Japanese, fr.json French, and so on
- Create index.js under translations folder
- Import all the .json files those you created
- Export an object called messages with key as language name.
Json file structure will look like this
- Install react-intl to your project `npm i react-intl`
- Configure react-intl to your app's index.js page like below
9. Now import formatted message and change the control id according to the JSON page you created for localization
Run the app and check for the changes as you change the language from your browser
Localizing static assets
Follow these steps for localizing assets in your project
- Create index.js under your assets folder
- Import all required assets
- Export an object called assets with each key as a locale and each value as page. Under each page create key/value pairs for the assets you imported, like below
- configure the assets in your app's index.js file like below
5.Pass the asset as prop
Run the application to see your desired assets replaced on language change
Call API according to locale
As you have locale value as a prop in your component, every get api call you make should have locale as query parameter
Once you complete all the steps stated above you should be able to localize your MiniApp.