createContext.js

import React, { createContext as reactCreateContext } from 'react';

export const createContext = value => {
  const context = reactCreateContext(value);

  // this is actually a component, which maps a 'render' named prop.
  // should have a better name etc.
  const consumer = ({ render }) => <context.Consumer>{render}</context.Consumer>;

  return {
    Provider: context.Provider,
    Consumer: consumer,
  };
};

HoC.js

export const createContext = value => {
  const context = reactCreateContext(value);

  export const withContext = Component => {
    const C = props => (
      <context.Consumer>
        {context => <Component {...context} {...props} />}
      </context.Consumer>
    );

    C.displayName = `withContext(${Component.displayName || Component.name})`;

    return C;
  };

  return {
    Provider: context.Provider,
    Consumer: context.Consumer,
    withContext,
  };
};

withContext.js

import React, { createContext as reactCreateContext } from 'react';

export const createContext = value => {
  const { Provider, Consumer } = reactCreateContext(value);

  // maps a prop named 'render' to function as a child
  const RenderPropConsumer = ({ render }) => <Consumer>{render}</Consumer>;

  const withContext = Component => {
    const C = props => (
      <Consumer>
        {context => <Component {...context} {...props} />}
      </Consumer>
    );

    C.displayName = `withContext(${Component.displayName || Component.name})`;

    return C;
  }

  return {
    Provider,
    Consumer,
    RenderPropConsumer,
    withContext,
  };
};