optional lng prop for useTranslation #1637

i18next · May 18, 2023 · 1019f88 · 1019f88
1 parent dbe2d0e
commit 1019f88
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 12.3.0
+
+- optional lng prop for useTranslation (helping on server side [1637](https://github.com/i18next/react-i18next/issues/1637))
+
 ### 12.2.2
 
 - try to fix conditional exports in package.json

diff --git a/index.d.ts b/index.d.ts
@@ -58,6 +58,7 @@ export interface UseTranslationOptions<TKPrefix = undefined> {
   keyPrefix?: TKPrefix;
   bindI18n?: string | false;
   nsMode?: 'fallback' | 'default';
+  lng?: string;
   // other of these options might also work: https://github.com/i18next/i18next/blob/master/index.d.ts#L127
 }
 

diff --git a/react-i18next.js b/react-i18next.js
@@ -874,7 +874,7 @@
     });
 
     function getT() {
-      return i18n.getFixedT(null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
+      return i18n.getFixedT(props.lng || null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
     }
 
     var _useState = react.useState(getT),

diff --git a/react-i18next.min.js b/react-i18next.min.js
diff --git a/src/useTranslation.js b/src/useTranslation.js
@@ -58,7 +58,7 @@ export function useTranslation(ns, props = {}) {
   // binding t function to namespace (acts also as rerender trigger)
   function getT() {
     return i18n.getFixedT(
-      null,
+      props.lng || null,
       i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0],
       keyPrefix,
     );

diff --git a/test/useTranslation.spec.js b/test/useTranslation.spec.js
@@ -160,4 +160,44 @@ describe('useTranslation', () => {
       expect(t2('key1')).toBe('test2');
     });
   });
+
+  describe('with lng prop', () => {
+    i18nInstance.addResource('en', 'translation', 'myKey', 'second test');
+    i18nInstance.addResource('fr', 'translation', 'myKey', 'deuxième essai');
+    i18nInstance.addResource('it', 'translation', 'myKey', 'secondo test');
+    const wrapper = ({ children, i18n }) => (
+      <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+    );
+
+    it('should render correct content', () => {
+      const { result: resultNoLng } = renderHook(() => useTranslation('translation'), {
+        wrapper,
+        initialProps: {
+          i18n: i18nInstance,
+        },
+      });
+      const { t: t1 } = resultNoLng.current;
+      expect(t1('myKey')).toBe('second test');
+
+      const { result: resultIt } = renderHook(() => useTranslation('translation', { lng: 'it' }), {
+        wrapper,
+        initialProps: {
+          i18n: i18nInstance,
+        },
+      });
+
+      const { t: t2 } = resultIt.current;
+      expect(t2('myKey')).toBe('secondo test');
+
+      const { result: resultFr } = renderHook(() => useTranslation('translation', { lng: 'fr' }), {
+        wrapper,
+        initialProps: {
+          i18n: i18nInstance,
+        },
+      });
+
+      const { t: t3 } = resultFr.current;
+      expect(t3('myKey')).toBe('deuxième essai');
+    });
+  });
 });