README
@oerlikon/i18n
Provides a simple way to localize your application.
Internally this module uses i18next and react-i18next
file structure
Create a locales folder inside client/static. There you should create subfolders for each language you like to support. The folder name should comply with the IETF language codes and contain a namespace json file (defaults to tranlsation.json).
If you e.g. support german annd turkish, the folder structure has to look like this:
client/
static/
locale/
de-DE/
localization.json
tr-TR/
localization.json
namespace json file (localization.json)
the namespace json file is in its simplest form a key-value-map where the key is the original english word and the value is the corresponding translation.
setup
There are two interchangeable ways to setup the i18n service. Both will listen to the settings
event of the app frame to ensure your app always displays the correct language for the user.
useLanguageListener()
setup with use the useLanguageListener()
hook somewhere high in your render tree but inside <UplinkProvider>
.
import React from 'react';
import { render } from 'react-dom';
import { UplinkProvider } from 'oerlikon@/react-uplink';
import { useLanguageListener } from '@oerlikon/i18n';
const App = () => {
useLanguageListener();
return <h1>This is my app</h1>;
};
render(
<UplinkProvider>
<App />
</UplinkProvider>,
document.getElementById('root')
);
<LanguageListener />
setup with alternatively you could use the <LanguageListener />
component.
import React from 'react';
import { render } from 'react-dom';
import { UplinkProvider } from '@oerlikon/react-uplink';
import { LanguageListener } from '@oerlikon/i18n';
const App = () => <h1>This is my app</h1>;
render(
<UplinkProvider>
<LanguageListener />
<App />
</UplinkProvider>,
document.getElementById('root')
);
usage
This module exposes a simplified useTranslation
hook that should suite most uses cases. For more complex scenarios, use the advanced api
import { useTranslation } from '@oerlikon/i18n';
const App = () => {
const translate = useTranslation();
return <h1>{translate('Hello')}</h1>;
};
advanced usage
This module supports the full reacti18next and react-i18next api. More information can be found in the respective documentations: