diff --git a/package.json b/package.json index cb475b7ae..9d7e0840d 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "postis": "^2.2.0", "react": "15.4.2", "react-dom": "15.4.2", + "react-i18next": "2.2.0", "react-native": "0.41.2", "react-native-background-timer": "1.0.0", "react-native-immersive": "0.0.4", diff --git a/react/features/app/components/AbstractApp.js b/react/features/app/components/AbstractApp.js index 6fbd2c3ef..fc2791b4c 100644 --- a/react/features/app/components/AbstractApp.js +++ b/react/features/app/components/AbstractApp.js @@ -5,6 +5,9 @@ import { Provider } from 'react-redux'; import { compose, createStore } from 'redux'; import Thunk from 'redux-thunk'; +import { I18nextProvider } from 'react-i18next'; +import { i18n } from '../../base/translation'; + import { localParticipantJoined, localParticipantLeft @@ -134,11 +137,13 @@ export class AbstractApp extends Component { if (route) { return ( - - { - this._createElement(route.component) - } - + + + { + this._createElement(route.component) + } + + ); } diff --git a/react/features/base/translation/functions.js b/react/features/base/translation/functions.js new file mode 100644 index 000000000..25bee4606 --- /dev/null +++ b/react/features/base/translation/functions.js @@ -0,0 +1,12 @@ +import { translate as reactTranslate } from 'react-i18next'; + +/** + * Wrap a translatable component. + * + * @param {Component} component - the component to wrap + * @returns {Component} the wrapped component. + */ +export function translate(component) { + // use the default list of namespaces + return reactTranslate([ 'main', 'languages' ], { wait: true })(component); +} diff --git a/react/features/base/translation/index.js b/react/features/base/translation/index.js index 2bab553a8..b3517eb35 100644 --- a/react/features/base/translation/index.js +++ b/react/features/base/translation/index.js @@ -1,2 +1,3 @@ export { default as i18n } from './Translation'; export * from './constants'; +export * from './functions';