This is a localization library that uses i18next
, react-i18next
, and a custom OTA SDK for translations.
In this document
The stored translation directory must have the following structure:
{{ BASE_URL }}/translations/{lang}.json
base_url is the cdnUrl passed to the initializeI18n
function, and lang is the language code. Refer to the example
Install the package by running:
npm install @deriv-com/translations
- initialize translations in main component by importing and calling
initializeI18n
outside of the component function - pass the return value to the
TranslationProvider
component from@deriv-com/translations
. - pass default language to the
TranslationProvider
component.
import { initializeI18n, TranslationProvider } from '@deriv/translations';
...
const i18nInstance = initializeI18n({ cdnUrl: 'https://cdn.example.com' })
const App = () => {
...
return (
<TranslationProvider defaultLang={'EN'} i18nInstance={i18nInstance}>
<App />
</TranslationProvider>
)
}
The initializeI18n
function initializes the i18next
instance with the OTA SDK, react-i18next
, and a language detector. It takes an object with a cdnUrl property, which is the URL of the CDN where the translations are stored.
import initializeI18n from "@deriv-com/translations";
initializeI18n({ cdnUrl: "https://cdn.example.com" });
- For strings use either
localize(...)
or<Localize />
import { Localize } from "@deriv-com/translations";
<Localize
i18n_default_text="You cannot use your real money account with {{website_name}} at this time."
values={{ website_name }}
/>;
Note that the
localize
function is deprecated and should be replaced with theuseTranslations
hook or theLocalize
component. the example of thelocalize
function is provided for backward compatibility.
import { localize } from "@deriv-com/translations";
<h4 className="drawer__notifications-header">
{localize("all notifications")}
</h4>;
The useTranslations hook is a custom hook that adds some more returned values on top of the useTranslation
hook from react-i18next
. It can be used to translate strings in your components, toggle the language of the app and see the current language etc.
Example usage:
import { useTranslations } from "@username/package";
const MyComponent = () => {
const { localize, switchLanguage, currentLang } = useTranslations();
const handleLanguageChange = () => {
switchLanguage(currentLang === "EN" ? "DE" : "EN");
};
return <p onClick={handleLanguageChange}>{localize("Change language")}</p>;
};
There is a github action that syncs the translations from Crowdin to the CDN.
The action takes following inputs:
CROWDIN_BRANCH_NAME
: Running on production, test or staging etcCROWDIN_PROJECT_ID
: Crowdin project ID which can be found in the crowdin project settingsCROWDIN_PERSONAL_TOKEN
: Crowdin personal token which can be found in the crowdin account settingsR2_ACCOUNT_ID
: R2 account ID from the Cloudflare R2 dashboardR2_ACCESS_KEY_ID
: R2 access key ID from the Cloudflare R2 dashboardR2_SECRET_ACCESS_KEY
: R2 secret access key from the Cloudflare R2 dashboardR2_BUCKET_NAME
: R2 bucket name from the Cloudflare R2 dashboard
Refer to the action file here
Contributions are welcome. Please open a pull request with your changes.