ReactProviderFactory.js - create simple providers with accompanying higher order 'with' components to access context.

ReactProvderFactory.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default (propName, propType, contextProp) => {
  return {
    Provider: createProvider(propName, propType, contextProp),
    Hoc: createHigherOrderComponent(propName, propType, contextProp)
  }
};

export const createProvider = (propName, propType, contextProp) => class Provider extends Component {
  static childContextTypes = {
    [contextProp]: PropTypes[propType]
  };
  getChildContext() {
    return {[contextProp]: this.props[propName]};
  }
  render() {
    return this.props.children;
  }
}

export const createHigherOrderComponent = (propName, propType, contextProp) => WrappedComponent => class withHoc extends Component {
  static contextTypes = {
    [contextProp]: PropTypes[propType]
  };
  render(){
    return <WrappedComponent {...this.context} {...this.props}/>
  }
}


/* USAGE */
// DebugProvider.js
import ReactProviderFactory from './ReactProviderFactory';
const Debug = ReactProviderFactory('debug', 'func', 'debug');
export const withDebug = Debug.Hoc;
export default Debug.Provider;

// App.js
import debug from 'debug';
import { Router, Route } from 'react-router-dom';
import Users from './Users';

class App extends Component {
  render() {
    return  <DebugProvider debug={debug}>
      <Router>
         <Route path="/users" component={Users} />
      </Router>
     </DebugProvider>
  }
}

// User.js
import { withDebug } from './DebugProvider';
class Users extends Component {
  componentDidMount() {
    const userDebug = this.props.debug('users');
    userDebug('Mounted!');
  }
  render() {
    return <div> Users </div>
  }
}

export default withDebug(Users);