Merge pull request #802 from zhouyuan1990/master

use forwardRef for withTranslation

src/withTranslation.js

@@ -2,23 +2,26 @@ import React from 'react';
 import { useTranslation } from './useTranslation';
 import { getDisplayName } from './utils';
 
-export function withTranslation(ns) {
+export function withTranslation(ns, options = {}) {
   return function Extend(WrappedComponent) {
-    function I18nextWithTranslation(props) {
+    function I18nextWithTranslation(props, ref) {
       const [t, i18n, ready] = useTranslation(ns, props);
 
-      return React.createElement(WrappedComponent, {
+      const passDownProps = {
         ...props,
         t,
         i18n,
         tReady: ready,
-      });
+      };
+      if (options.withRef && ref) {
+        passDownProps.ref = ref;
+      }
+      return React.createElement(WrappedComponent, passDownProps);
     }
 
     I18nextWithTranslation.displayName = `withI18nextTranslation(${getDisplayName(
       WrappedComponent,
     )})`;
-
-    return I18nextWithTranslation;
+    return options.withRef ? React.forwardRef(I18nextWithTranslation) : I18nextWithTranslation;
   };
 }

test/withTranslation.spec.js

@@ -19,4 +19,11 @@ describe('withTranslation', () => {
     // console.log(wrapper.debug());
     expect(wrapper.contains(<div>test</div>)).toBe(true);
   });
+
+  it('should has ref', () => {
+    const HocElement = withTranslation('translation', { withRef: true })(TestComponent);
+    const hocRef = React.createRef();
+    const parentWrapper = mount(<HocElement ref={hocRef} />);
+    expect(hocRef.current).not.toBeNull();
+  });
 });