Merge pull request #714 from adrai/master

Added possibility to use useTranlation returning Array or Object

example/react/src/App.js

@@ -23,7 +23,7 @@ function MyComponent() {
 
 // page uses the hook
 function Page() {
-  const [t, i18n] = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const changeLanguage = lng => {
     i18n.changeLanguage(lng);

src/index.d.ts

@@ -42,10 +42,14 @@ export function useSSR(initialI18nStore: any, initialLanguage: any): void;
 export interface UseTranslationOptions {
   i18n?: i18next.i18n;
 }
+export type UseTranslationResponse = [i18next.TFunction, i18next.i18n] & {
+  t: i18next.TFunction;
+  i18n: i18next.i18n;
+};
 export function useTranslation(
   ns?: Namespace,
   options?: UseTranslationOptions,
-): [i18next.TFunction, i18next.i18n];
+): UseTranslationResponse;
 
 // Need to see usage to improve this
 export function withSSR(): (

src/useTranslation.js

@@ -35,7 +35,10 @@ export function useTranslation(ns, props = {}) {
   if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
   if (!i18n) {
     warnOnce('You will need pass in an i18next instance by using i18nextReactModule');
-    return [k => k, {}];
+    const retNotReady = [k => k, {}];
+    retNotReady.t = k => k;
+    retNotReady.i18n = {};
+    return retNotReady;
   }
   const i18nOptions = getDefaults();
 
@@ -100,7 +103,10 @@ export function useTranslation(ns, props = {}) {
   // return hook stuff if ready or
   // not yet loaded namespaces -> load them -> and trigger suspense
   if (ready) {
-    return [t.t, i18n];
+    const ret = [t.t, i18n];
+    ret.t = t.t;
+    ret.i18n = i18n;
+    return ret;
   }
   throw new Promise(resolve => {
     loadNamespaces(i18n, namespaces, () => {

test/typescript/examples.test.tsx

@@ -21,7 +21,7 @@ function MyComponent() {
 
 // page uses the hook
 function Page() {
-  const [t, i18n] = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const changeLanguage = (lng: string) => {
     i18n.changeLanguage(lng);

test/typescript/useTranslation.test.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+
+function defaultObjectUsage() {
+  const { t, i18n } = useTranslation();
+  return (
+    <div>
+      {t('key1')} {i18n.exists('key1')}
+    </div>
+  );
+}
+
+function alternateArrayUsage() {
+  const [t, i18n] = useTranslation();
+  return (
+    <div>
+      {t('key1')} {i18n.exists('key1')}
+    </div>
+  );
+}

test/useTranslation.spec.js

@@ -1,23 +1,42 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import i18n from './i18n';
+import i18nInstance from './i18n';
 import { useTranslation } from '../src/useTranslation';
 
 jest.unmock('../src/useTranslation');
 
 describe('useTranslation', () => {
-  function TestComponent() {
-    const [t, instance] = useTranslation('translation', { i18n });
+  describe('array', () => {
+    function TestComponent() {
+      const [t, instance] = useTranslation('translation', { i18nInstance });
 
-    expect(typeof t).toBe('function');
-    expect(instance).toBe(i18n);
+      expect(typeof t).toBe('function');
+      expect(instance).toBe(i18nInstance);
 
-    return <div>{t('key1')}</div>;
-  }
+      return <div>{t('key1')}</div>;
+    }
 
-  it('should render correct content', () => {
-    const wrapper = mount(<TestComponent />, {});
-    // console.log(wrapper.debug());
-    expect(wrapper.contains(<div>test</div>)).toBe(true);
+    it('should render correct content', () => {
+      const wrapper = mount(<TestComponent />, {});
+      // console.log(wrapper.debug());
+      expect(wrapper.contains(<div>test</div>)).toBe(true);
+    });
+  });
+
+  describe('object', () => {
+    function TestComponent() {
+      const { t, i18n } = useTranslation('translation', { i18n: i18nInstance });
+
+      expect(typeof t).toBe('function');
+      expect(i18nInstance).toBe(i18n);
+
+      return <div>{t('key1')}</div>;
+    }
+
+    it('should render correct content', () => {
+      const wrapper = mount(<TestComponent />, {});
+      // console.log(wrapper.debug());
+      expect(wrapper.contains(<div>test</div>)).toBe(true);
+    });
   });
 });