able to change language on click in menu in react!

app/configs/i18next.config.client.ts

@@ -1,4 +1,4 @@
-import { remote } from 'electron';
+import { remote, ipcRenderer } from 'electron';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import SyncBackend from 'i18next-node-fs-backend';
@@ -39,4 +39,8 @@ if (!i18n.isInitialized) {
   i18n.init(i18nextOptions);
 }
 
+ipcRenderer.on('sending-language-from-main', (_, message) => {
+  i18n.changeLanguage(`${message}`);
+});
+
 export default i18n;

app/containers/Root.tsx

@@ -1,22 +1,33 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import { hot } from 'react-hot-loader/root';
 import { History } from 'history';
 import { Store } from '../store';
 import Routes from '../Routes';
+import i18n from '../configs/i18next.config.client';
 
 type Props = {
   store: Store;
   history: History;
 };
 
-const Root = ({ store, history }: Props) => (
-  <Provider store={store}>
-    <ConnectedRouter history={history}>
-      <Routes />
-    </ConnectedRouter>
-  </Provider>
-);
+const Root = ({ store, history }: Props) => {
+  const [, setAppLanguage] = useState('');
+
+  useEffect(() => {
+    i18n.on('languageChanged', (lng) => {
+      setAppLanguage(lng);
+    });
+  }, []);
+
+  return (
+    <Provider store={store}>
+      <ConnectedRouter history={history}>
+        <Routes />
+      </ConnectedRouter>
+    </Provider>
+  );
+};
 
 export default hot(Root);

app/index.tsx

@@ -1,9 +1,6 @@
 import React, { Fragment, Suspense } from 'react';
 import { render } from 'react-dom';
 import { AppContainer as ReactHotAppContainer } from 'react-hot-loader';
-// import { ipcRenderer } from 'electron';
-// import { I18nextProvider } from 'react-i18next';
-// import i18n from './configs/i18next.config.client';
 import './configs/i18next.config.client';
 import { history, configuredStore } from './store';
 import './app.global.css';
@@ -12,8 +9,6 @@ const store = configuredStore();
 
 const AppContainer = process.env.PLAIN_HMR ? Fragment : ReactHotAppContainer;
 
-// let initialI18nStore = ipcRenderer.sendSync('get-initial-translations');
-
 document.addEventListener('DOMContentLoaded', () => {
   // eslint-disable-next-line global-require
   const Root = require('./containers/Root').default;

app/main.dev.ts

@@ -114,6 +114,7 @@ const createWindow = async () => {
     if (mainWindow === null) return;
     menuBuilder = new MenuBuilder(mainWindow, i18n);
     menuBuilder.buildMenu();
+    mainWindow.webContents.send('sending-language-from-main', lng);
     console.log(`Language changed! ${lng}`);
   });