add key prefix support to useTranslation hook (#1371)

index.d.ts

@@ -52,6 +52,7 @@ export function useSSR(initialI18nStore: Resource, initialLanguage: string): voi
 export interface UseTranslationOptions {
   i18n?: i18n;
   useSuspense?: boolean;
+  keyPrefix?: string;
 }
 export type UseTranslationResponse = [TFunction, i18n, boolean] & {
   t: TFunction;

package.json

@@ -67,7 +67,7 @@
     "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-testing-library": "^3.10.1",
     "husky": "^3.0.3",
-    "i18next": "^20.0.0",
+    "i18next": "^20.6.0",
     "jest": "^24.8.0",
     "jest-cli": "^24.8.4",
     "lint-staged": "^8.1.3",

src/useTranslation.js

@@ -24,7 +24,7 @@ export function useTranslation(ns, props = {}) {
     );
 
   const i18nOptions = { ...getDefaults(), ...i18n.options.react, ...props };
-  const { useSuspense } = i18nOptions;
+  const { useSuspense, keyPrefix } = i18nOptions;
 
   // prepare having a namespace
   let namespaces = ns || defaultNSFromContext || (i18n.options && i18n.options.defaultNS);
@@ -40,7 +40,11 @@ export function useTranslation(ns, props = {}) {
 
   // binding t function to namespace (acts also as rerender trigger)
   function getT() {
-    return i18n.getFixedT(null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0]);
+    return i18n.getFixedT(
+      null,
+      i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0],
+      keyPrefix,
+    );
   }
   const [t, setT] = useState(getT);
 

test/useTranslation.spec.js

@@ -114,6 +114,19 @@ describe('useTranslation', () => {
     });
   });
 
+  describe('key prefix', () => {
+    i18nInstance.addResource('en', 'translation', 'deeply.nested.key', 'here!');
+
+    it('should apply keyPrefix', () => {
+      const { result } = renderHook(() =>
+        useTranslation('translation', { i18n: i18nInstance, keyPrefix: 'deeply.nested' }),
+      );
+      const { t } = result.current;
+      expect(t('key')).toBe('here!');
+      expect(t.keyPrefix).toBe('deeply.nested');
+    });
+  });
+
   describe('replacing i18n instance in provider', () => {
     i18nInstance.addResource('fr', 'translation', 'key1', 'test2');
     const i18nInstanceClone = i18nInstance.cloneInstance({ lng: 'fr' });

ts4.1/index.d.ts

@@ -211,6 +211,7 @@ export function useSSR(initialI18nStore: Resource, initialLanguage: string): voi
 export interface UseTranslationOptions {
   i18n?: i18n;
   useSuspense?: boolean;
+  keyPrefix?: string;
 }
 
 type UseTranslationResponse<N extends Namespace> = [TFunction<N>, i18n, boolean] & {