We're using the library react-i18next to translate strings for us. At runtime,
the app will detect the user's language preference from their browser settings
and translate all strings that have been wrapped in the t function the
useTranslation hook provides.
Using the selected language, it will find the corresponding json file in
locales. If the language is not found, it will fallback to the en json file.
The string that is passed to t acts a key in this json file. The corresponding
value is the translated string in that locale's language.
Using the english version of the string as a key in the json file allows us to
easily grep through our codebase to find specific components. For example, if
I'm looking for a button that says Add Asset, I can still just search for that
string to find where this component lives in this codebase. The alternative
would be to use a key called AddAssetCopy, that would map to the translated
string in the given language. While that works, it adds an unnecessary layer of
abstraction. In addition, this allows community members to run through a
language json file and simply translate the all the keys listed in the json.
As you maye have surmised, every time you add new copy, you will need to wrap
the string in t AND add a key/value pair for it in EVERY language json file.
This is annoying and time consuming. There is a build command you run that will
statically run through the codebase, find all t function calls, and add a
corresponding key/value pair to the needed json files. It will default to adding
the english language version as the value so as to not show an empty string if
the translation hasn't been done yet.
These default translations can be generated by running:
yarn build:translations
- Go into your browser settings and change your language preference.
react-i18nextalso saves the preferred language in the UI's localStorage. Clear this value and refresh your dev page or reopen the popup.