provideContext.js

import React from 'react'

const provideContext = (contextKey, contextType) => (
  React.createClass({
    childContextTypes: {
      [contextKey]: contextType
    },

    getChildContext() {
      const { children, ...props } = this.props
      return {
        [contextKey]: props
      }
    },

    render() {
      return React.Children.only(this.props.children)
    }
  })
)

export default provideContext

withContext.js

import React from 'react'

export default (contextKey, contextType) => (
  (Component) => (
    React.createClass({
      contextTypes: {
        [contextKey]: contextType
      },

      render() {
        const props = {
          ...this.props,
          [contextKey]: this.context[contextKey]
        }
        return <Component {...props}/>
      }
    })
  )
)

// usage
const Something = withContext('router', PropTypes.object)(React.createClass({
  render() {
    this.props.router
  }
}))

Usage

// PropTypes.js
export const app = shape({ user: object, token: string })

// AppContext.js
import provideContext from './provideContext'
import { app } from './PropTypes'
export default provideContext('app', app)

// SomeComponent.js
import React from 'react'
import withContext from './withContext'
import { app } from '../PropTypes'
export default withContext('app', app)(React.createClass({
  render() {
    this.props.app
    // ...
  }
}))

// entry.js
// AppContext props become context
render(<AppContext user={__USER__} token={__TOKEN__}><SomeComponent/></AppContext>

This way components can only provide one context (no naming collisions, just shadowing) and a component can only ask for on context, and the entire context API is wrapped so the entire app is easily protected from future changes.

There's a typo in SomeComponent.js right? It should be importing from AppContext?

nope.

👏