Export React component with two property

Question

I'm using MaterialUI and I have to export my components like this:

import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";

...

export default withStyles(styles)(Users);

Now I started to use i18next to use internationalization in my project but it want me to export my component like this:

export default translate("common")(Users);

The question is how can I satisfy both? How can I export with withStyles and translate ?

Any help is appreciated

Answer 1

Both of those pieces of code produce a new component, so you can feed the result of one into the other. Done in one line, it would look like this:

export default withStyles(styles)(translate("common")(Users));

Or if it makes it easier to follow, here it is split on two lines.

const TranslatedUsers = translate("common")(Users);
export default withStyles(styles)(TranslatedUsers);

Answer 2

The purpose of higher-order components is to provide a way for components to be efficiently composed:

export default translate("common")(
  withStyles(styles)(Users)
);

It can be flattened with composition helpers, eg recompose :

import { compose } from 'recompose'

export default compose(
  translate("common"),
  withStyles(styles)
)(Users);