React-i18next: No hoisting of statics props in new `withTranslation` component.

[sergii-vorobei]

Describe the bug
No hoisting of statics props in the new withTranslation component.

Occurs in react-i18next version
10.13.1

To Reproduce
Steps to reproduce the behavior:

1. Verify that static props from the child component are not copied to the component created with withTranslation HOC.

Expected behaviour
The static props should be present in the created component

Additional context
In the previous version in the withNamespaces component, you called hoistStatics, so all the props were called and everything worked. In the new withTranslation component this part is missing, therefore static props of the wrapped component are missing.

[jamuhl]

https://react.i18next.com/latest/withtranslation-hoc#hoist-non-react-statics

[sergii-vorobei]

@jamuhl Thanks for answering. What was the decision behind this? As now I am not able to use directly the withTranslation HOC as majority of my components has some static props. So to make it work I need to either create my own component which wraps withTranslation to do hoisting of static props or to do hoistStatics in every connected component, which is again a lot of changes.

Usually, it is a good practice to hoist statics on custom HOCs and almost every popular library does that, e.g React-Router's withRouter, Redux's connect, React Intl's injectIntl.

Also, this change is not reflected in the migration docs, so we faced silent errors in our code which
were quite hard to track due to unobvious relation to the translation part of the app. This seems to be quite a breaking and important change.

[jamuhl]

People crying how large the module is...hoistnonstatic is large (3kb minified just for hoisting)...and most people do not need it...in my opinion using statics is bad design...it's easily doable in userland even reusable...by creating a own component:

import { withTranslation } from 'react-i18next'; 
import hoistNonReactStatics from 'hoist-non-react-statics';

export function hoistedWithTranslation(ns, options = {}) {
  return function Extend(WrappedComponent) {
    return hoistNonReactStatics(withTranslation(ns, options)(WrappedComponent), WrappedComponent);
  }
}

not tested that - but should work

[sergii-vorobei]

@jamuhl thanks for the quick response and proposed solution.

[jamuhl]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.
If you liked my support / work - I would enjoy a coffee sponsored using the “:purple_heart:Sponsor Button”.
There are many ways to help this project :pray:

[jenskuhrjorgensen]

@sergii-vorobei thanks for asking the question and @jamuhl thanks for your proposed answer - it works like a charm.

After upgrading to react-i18next, everything fell apart in my app - probably because I use a very old version of react-navigation (1.0.0-beta.27), in which I use both static router and static navigationOptions.