Exports provider and HOC to be used by any application without install I18Next libraries

extensions/ohif-i18n/src/index.js

@@ -1,5 +1,9 @@
 import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
+import {
+  initReactI18next,
+  withTranslation,
+  I18nextProvider,
+} from 'react-i18next';
 
 const currentLanguage = process.env.APP_LANG || 'en-US';
 const debugMode = process.env.I18N_DEBUG || false;
@@ -74,5 +78,5 @@ i18n
     translate = t;
   });
 
-export { translate as t };
+export { translate as t, withTranslation, I18nextProvider };
 export default i18n;

extensions/ohif-i18n/src/locales/en/CineDialog.json

@@ -4,15 +4,5 @@
   "Previous image": "Previous, image",
   "Play / Stop": "Play, / Stop",
   "Next image": "Next, image",
-  "Skip to last image": "Skip, to last image",
-  "Skip to first image": "Skip, to first image",
-  "Previous image": "Previous, image",
-  "Play / Stop": "Play, / Stop",
-  "Next image": "Next, image",
-  "Skip to last image": "Skip, to last image",
-  "Skip to first image": "Skip, to first image",
-  "Previous image": "Previous, image",
-  "Play / Stop": "Play, / Stop",
-  "Next image": "Next, image",
   "Skip to last image": "Skip, to last image"
 }

src/components/Header/Header.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Link, withRouter } from 'react-router-dom';
 import { Dropdown } from 'react-viewerbase';
 import { withTranslation } from 'react-i18next';
-import i18n, { t } from 'ohif-i18n';
+import i18n from 'ohif-i18n';
 import './Header.css';
 import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
 import ConnectedUserPreferencesModal from '../../connectedComponents/ConnectedUserPreferencesModal.js';
@@ -13,7 +13,7 @@ class Header extends Component {
     home: PropTypes.bool.isRequired,
     location: PropTypes.object.isRequired,
     openUserPreferencesModal: PropTypes.func,
-    children: PropTypes.node
+    children: PropTypes.node,
   };
 
   static defaultProps = {
@@ -32,6 +32,7 @@ class Header extends Component {
   }
 
   loadOptions() {
+    const { t } = this.props;
     this.options = [
       {
         title: t('preferences'),
@@ -49,12 +50,13 @@ class Header extends Component {
   changeLanguage(language) {
     i18n.init({
       fallbackLng: language.substring(0, 2),
-      lng: language
+      lng: language,
     });
     this.loadOptions();
   }
 
   render() {
+    const { t } = this.props;
     return (
       <div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
         <div className="header-left-box">
@@ -108,11 +110,7 @@ class Header extends Component {
           >
             ES-MX
           </button>
-          <Dropdown
+          <Dropdown title={t('options')} list={this.options} align="right" />
-            title={t('options')}
-            list={this.options}
-            align="right"
-          />
           <ConnectedUserPreferencesModal />
         </div>
       </div>