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