This module contains the configs, helpers and translations required to make an identity app available in multiple languages.
Implemented on top of i18next library.
Add following dependency in your package.json file.
"@thiva/i18n": "<VERSION>"
pnpm build
pnpm test
import { I18n } from "@thiva/i18n";
I18n.init(options, override, true, true)
.then(() => {
// On successful init.
})
.catch((error) => {
// On error.
});
Init function arguments:
Parameter | Type | Default | Description |
---|---|---|---|
options | i18next.InitOptions | undefined | Passed in init options. |
override | boolean | false | Should the passed in options replace the default. |
autoDetect | boolean | false | If autodetect plugin should be used or not. |
useBackend | boolean | false | If XHR back end plugin should be used or not. |
debug | boolean | false | If debug is enabled. |
framework | SupportedI18nFrameworks | SupportedI18nFrameworks.REACT | The framework to use. |
plugins | i18next.Module[] | undefined | Other i18next plugins to use. |
import { I18n } from "@thiva/i18n";
const i18n = I18n.instance;
import { I18nextProvider } from "react-i18next";
import { I18n } from "@thiva/i18n";
return (
<I18nextProvider i18n={ I18n.instance }>
...
</I18nextProvider>
)
- Create a folder with the language's ISO code inside
src/translations
. ex:en-GB
- Create a
portals
folder and implement the common, myAccount, console, extensions etc. namespaces. - Create other folders such as
docs
, etc. and place the necessary translations. - Create a
meta.ts
file and add all the necessary metadata regarding the language bundle.
import { I18nModuleConstants } from "../../constants";
import { LocaleMeta } from "../../models";
export const meta: LocaleMeta = {
code: "en-GB",
flag: "gb",
name: "English (United Kingdom)",
namespaces: [
I18nModuleConstants.COMMON_NAMESPACE,
I18nModuleConstants.CONSOLE_PORTAL_NAMESPACE,
I18nModuleConstants.MY_ACCOUNT_NAMESPACE,
I18nModuleConstants.EXTENSIONS_NAMESPACE
]
};
- Export the bundle from the index.
import * as portals from "./portals";
import { LocaleBundle } from "../../models";
import { meta } from "./meta";
export const EN_GB: LocaleBundle = {
meta,
resources: {
portals
}
};
- Create a folder with the language's ISO code inside the distribution directory. ex: For Console, the i18n bundle will be saved under
resources/i18n
. Create a folderfr-FR
to store french language the translations. - Copy the translated JSON files.
- Update the
meta.json
file.
{
"fr-FR": {
"code": "fr-FR",
"flag": "fr",
"name": "Français (France)",
"namespaces": [
"common",
"console",
"myAccount",
"extensions"
],
"paths": {
"common": "fr-FR/portals/common.json",
"console": "fr-FR/portals/console.json",
"myAccount": "fr-FR/portals/myAccount.json",
"extensions": "fr-FR/portals/extensions.json"
}
}
}
Licenses this source under the Apache License, Version 2.0 (LICENSE), You may not use this file except in compliance with the License.