react hoc example

index.js

//функция, которая формирует тему
const makeStyle = theme => ({
  background: theme.mainColor,
})

//Сам ХОК
const WithStyle = styleParam => (WrappedComponent) => {
  return class withStyleHOC extends React.Component {
    render() {
      const myProps = { someProp: 123 };
      console.log('this.props', this.props);
      return <WrappedComponent something={styleParam} {...this.props} {...myProps} />;
    }
  };
};

//компонент который засунем в ХОК
const Component = (param) => {
  return (
    <div style={param.something}>
      Hello, world
    </div>
  );
};

//тема по умолчанию
const defaultTheme = { mainColor: 'green' };
//создания ХОКа (прокидываем тему и стиль и компонент)
const Some = WithStyle(makeStyle(defaultTheme))(Component);

//имплементация ХОКа
const Content = () => (
  <div className="container">
    <Some text="TEXT" />
  </div>
);