Now using useTranslations independently from cgpv

package.json

@@ -24,10 +24,12 @@
     "ajv-formats": "^2.1.1",
     "chart.js": "^4.4.0",
     "chartjs-adapter-moment": "^1.0.1",
+    "i18next": "^23.7.11",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-i18next": "^13.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",

src/app.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { GeoChart } from './chart';
 import { GeoChartConfig, ChartType, ChartOptions, ChartData, GeoChartAction, DefaultDataPoint } from './chart-types';
 import { SchemaValidator } from './chart-schema-validator';
@@ -20,7 +21,7 @@ export function App(props: TypeAppProps): JSX.Element {
   const w = window as any;
   // Fetch the cgpv module
   const { cgpv } = w;
-  const { react, ui, useTranslation } = cgpv;
+  const { react, ui } = cgpv;
   const { useEffect, useState, useCallback } = react;
   const { Box } = ui.elements;
   const { schemaValidator } = props;

src/chart.tsx

@@ -1,3 +1,4 @@
+import { I18nextProvider, useTranslation } from 'react-i18next';
 import { Chart as ChartJS, ChartType, ChartOptions, ChartData, ChartDataset, registerables, ChartConfiguration, Plugin } from 'chart.js';
 import { Chart as ChartReact } from 'react-chartjs-2';
 import 'chartjs-adapter-moment';
@@ -25,8 +26,6 @@ import { createChartJSOptions, createChartJSData, fetchItemsViaQueryForDatasourc
 import { isNumber, downloadJson, getColorFromPalette } from './chart-util';
 import { sxClasses } from './chart-style';
 import { logHigh, logUseEffectMount, logUseEffectUnmount } from './logger';
-import T_EN from '../locales/en/translation.json';
-import T_FR from '../locales/fr/translation.json';
 
 // Activate useWhatChanged in development (leaving the code commented, see header of file for reason)
 // setUseWhatChange(process.env.NODE_ENV === 'development');
@@ -129,7 +128,6 @@ export function GeoChart<
   const w = window as any;
   // Fetch the cgpv module
   const { cgpv } = w;
-  const { useTranslation } = cgpv;
   const { useEffect, useState, useRef, useCallback, CSSProperties } = cgpv.react;
   const {
     Box,
@@ -1118,22 +1116,6 @@ export function GeoChart<
     };
   }, [action]);
 
-  // Effect hook to be executed with i18n
-  useEffect(() => {
-    // Log
-    const USE_EFFECT_FUNC = 'GEOCHART - USE EFFECT - CURRENT - i18n';
-    logUseEffectMount(USE_EFFECT_FUNC);
-
-    // Add GeoChart translations file
-    i18n.addResourceBundle('en', 'translation', T_EN);
-    i18n.addResourceBundle('fr', 'translation', T_FR);
-
-    return () => {
-      // Log
-      logUseEffectUnmount(USE_EFFECT_FUNC);
-    };
-  }, [i18n]);
-
   // #endregion
 
   // #region EVENT HANDLERS SECTION ***********************************************************************************
@@ -1670,10 +1652,12 @@ export function GeoChart<
    */
   const renderEverything = (): JSX.Element => {
     return (
-      <Box sx={sxClasses.mainContainer}>
-        {!isLoadingChart && renderChartContainer()}
-        {isLoadingChart && <CircularProgress />}
-      </Box>
+      <I18nextProvider i18n={i18n} defaultNS="translation">
+        <Box sx={sxClasses.mainContainer}>
+          {!isLoadingChart && renderChartContainer()}
+          {isLoadingChart && <CircularProgress />}
+        </Box>
+      </I18nextProvider>
     );
   };
 

src/i18n.ts

@@ -0,0 +1,34 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import translationEn from '../locales/en/translation.json';
+import translationFr from '../locales/fr/translation.json';
+
+i18n
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    debug: false,
+    lng: 'en',
+    fallbackLng: ['en', 'fr'],
+    supportedLngs: ['en', 'fr'],
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+    resources: {
+      en: {
+        translation: translationEn,
+      },
+      fr: {
+        translation: translationFr,
+      },
+    },
+    // special options for react-i18next
+    // learn more: https://react.i18next.com/components/i18next-instance
+    react: {
+      useSuspense: true,
+    },
+  });
+
+export default i18n;

src/index.tsx

@@ -2,6 +2,7 @@ import App from './app';
 import { SchemaValidator } from './chart-schema-validator';
 
 // Export the types from the package
+export * from './i18n';
 export * from './chart-types';
 export * from './chart-parsing';
 export * from './chart-schema-validator';