High Order Component Implementation example

TranslateHighOrderComponent.jsx

import React, { Component } from 'react';

import {
  translateFromCountry,
} from './translate';

// High order Component translate
const translate = (WrappedComponent) => {
  return class extends Component {
    translate = (key, params) => {
      const {
        country,
      } = this.props;

      return translateFromCountry(country)(key, params);
    }

    render() {
      return (
        <WrappedComponent {...this.props} translate={this.translate} />
      );
    }
  }
}

// wrapped component by HoC translate
class MyComponent extends Component {
  render() {
    const {
      translate,
    } = this.props;

    return (
      <div>
        {translate('welcome', { user: 'Victor' })}
      </div>
    )
  }
}

export default translate(MyComponent);