Skip to content

Latest commit

 

History

History
117 lines (78 loc) · 3.39 KB

I18n.md

File metadata and controls

117 lines (78 loc) · 3.39 KB

I18n

UI uses react-i18n to make the components internationalizable. This is based on i18next.

The application defines the strategy how to get the translations.

Namespaces

Each packages has their own namespace:

Package Namespace
components tui-components
forms tui-forms

Creating a i18n components

Each components who has to be internationalizable are exported by default with translate from 'react-i18next' with its namespace.

The component can be used within an internationalized application or not. We import a default i18n configuration that will be ignored if one is provided in the context by react-i18next provider.

import React from 'react';
import { withTranslation } from 'react-i18next';

import { I18N_DOMAIN } from '../constants';
import '../translate';

const HelloWorld = ({ t }) => <div>{`Hi ${t('HELLO', { defaultValue: 'Hello world' })}`}</div>;

export default withTranslation(I18N_DOMAIN)(HelloWorld);

Translate

In the framework, at each time that the t method is called, it is a default value that is displayed, if not translated explicitly by the app.

t('SUFFIX_COMPONENT_KEY', { defaultValue: 'translated' });

The key has to be prefixed by the main current component to translate. e.g: LIST_DISPLAY HEADERBAR_GO_PORTAL

Specific translation cases

In some cases, you want to add some html markup or style to your translations. For this case, you can use Trans component https://react.i18next.com/components/trans-component.html

import { Trans } from 'react-i18next';

<Trans i18nKey="DELETE_RESOURCE_MESSAGE" parent="div">
	Are you sure you want to remove the {{ resourceLabel: resourceInfo.resourceTypeLabel }}
	<strong> {{ resourceName: resourceInfo.label }} </strong> ?
</Trans>;

For this case, the translation json value is : Are you sure you want to remove the <1>{{ resourceLabel }}</1> <2><1>{{ resourceName }}</1></2>?

More infos in the react-i18next's documentation

Use i18n with UI in your App

Create an instance of i18n

yarn add i18next

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
	debug: false,
	wait: true, // globally set to wait for loaded translations in translate hoc
});

export default i18n;

The UI framework have to be nested into a Provider to allow to translate the labels. The provider is responsible to pass the i18next instance down to all the translate hocs using react context.

Next, you need to nest the application in the I18nextProvider with the previous i18n created in order to your environnement:

Angular Provider with ng-react

Each components 'ng-react' will load his provider with a i18n given by the props. The components creates his react Provider with the i18n given.

import React from 'react';
import translate from 'react-i18next';
import i18n from 'i18next';

const TranslatedApp = translate(I18N_DOMAIN, { i18n })(App);

const AppComponent = props => <TranslatedApp />;

angular
	.module('app', ['react'])
	.value('AppComponent', AppComponent)
	.controller('appController', () => {
		this.props = {
			i18n,
		};
	});

<react-component name="AppComponent" props="$ctrl.props" />;

Extract a catalog of the key in the framework

yarn extract-i18n