consume.tsx

import * as React from 'react';
const hoistNonReactStatic = require('hoist-non-react-statics');

/**
 * Decorator to form a HOC that acts like a react context consumer.
 * Useful when you want context to be made available in an entire component and not just in render.
 *
 * Example:
 * type MyContextProps = {foo: string};
 * const MyContext = createContext<MyContextProps>({foo: 'bar'});
 *
 * @consume(MyContext.Consumer)
 * class MyComponent extends React.Component<MyContextProps> {
 *   componentDidMount () {
 *     // Context is now available in the entire component
 *     console.log(this.props.foo);
 *   }
 *
 *   render () {
 *     return <span>{this.props.foo}</span>;
 *   }
 * }
 */
export function consume<ContextProps> (Consumer: React.Consumer<ContextProps>) {
  return function decorateConsume<T extends React.ComponentClass> (DecoratedComponent: T): T {
    class DecoratedConsumer extends React.Component {
      render () {
        const {children, ...localProps} = this.props;
        return (
          <Consumer>
            {(contextProps) => (
              <DecoratedComponent {...contextProps} {...localProps}>
                {children}
              </DecoratedComponent>
            )}
          </Consumer>
        );
      }
    }

    (DecoratedConsumer as any).displayName = `@consume(${DecoratedComponent.displayName || DecoratedComponent.name})`;
    hoistNonReactStatic(DecoratedConsumer, DecoratedComponent);
    return DecoratedConsumer as T;
  };
}