This documents describes how i18n works in Bob Wallet, and how to add support for a new language
All locale strings are saved as {locale}.json
based on result return from electron.app.getLocale().
A locale json looks like this:
en.json
{
"hello": "Hello, %s!"
}
On app starts, all locale strings are compiled into a JSON object, and injected to the app using React Context.
Usage Example:
import {I18nContext} from "../../utils/i18n";
class Example extends Component {
static contextType = I18nContext;
render() {
const {t} = this.context;
// This will render "Hello, World!" based on en.json above
return (
<div>{t('hello', 'World')}</div>
);
}
}
When getting string using the injected this.context.t(localeKey)
function, the app will:
- first check to see if there is a matching string for
localeKey
from the exact locale (e.g.en-US.json
) - if a matching string cannot be found, it will check to see if there is matching string for
localeKey
from the root locale (e.g.en-US.json
->en.json
) - if a match is still not found, it will use
en.json
by default - if
localeKey
is not found inen.json
, it will renderthis.context.t(localeKey)
in the UI;
- Copy
/locales/en.json
to a new file, and save it as[locale].json
. For example, if you are adding support for Spanish, the file name should bees.json
. You can find all valid locale strings here. - Start translating 📙
- When finished translating, save your file
- Go to https://github.com/kyokan/bob-wallet/tree/master/locales
- Click
Add Files -> Uplaod Files
- Drag and drop your file to upload it to GitHub
- Make sure you select Create a new branch for this commit and start a pull request.
- Click Propose Change
As new copies are added to Bob Wallet, new keys will be added to en.json
. There is a npm script added to help extend new key to existing locale json.
The following script will extend zh.json
with any new keys from en.json
without overwritting existing translations.
npm run add-locale zh
- Go to Setting -> General
- From the language dropdown, select Custom JSON
- Upload your translation json file
- When merging in a new locale json, be sure to update the dropdown list in
app/util/i18n.js
with the new locale. - When new keys are added to
en.json
, make sure to runnpm run add-locale
to extend new keys to existing locale json.
Language | Filename | Contributors |
---|---|---|
Catalan | ca.json | Faltrum (@faltrum) |
Spanish | es-ES.json | Faltrum (@faltrum) |
French | fr-FR.json | Miguel Gargallo (@miguelgargallo) |