A HOC for moving props to context. Used as a conduit to maintain context when rendering to a different subtree.

with-context-as-props.js

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

const DefaultBaseComponent = props => <div {...props} />;

const withContextFromProps = (
  propTypes: PropTypes.object,
  BaseComponent: PropTypes.func = DefaultBaseComponent
) => {
  class ContextProps extends Component {
    static propTypes = { children: PropTypes.node }

    getChildContext() {
      const props = Object.keys(this.props).reduce((result, key) => {
        if (key !== 'children') result[key] = this.props[key];

        return result;
      }, {});

      return props;
    }

    render() {
      return <BaseComponent>{this.props.children}</BaseComponent>;
    }
  }

  ContextProps.displayName = 'withContextFromProps';
  ContextProps.childContextTypes = propTypes;

  return ContextProps;
};

export default withContextFromProps;