@oerlikon/i18n

@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.

setup with useLanguageListener()

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')
);

setup with <LanguageListener />

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:

• i18next
• react-i18next