Named Children (FramedContainer) HOC

FramedContainer.jsx

import T from 'prop-types';
import React, {Children, PureComponent} from 'react';

function getChildMapPropObject(child = {}) {
  const newProps = {};
  const {type, props: {children: propValue} = {}} = child;

  if (typeof type === 'string') {
    newProps[type] = propValue;
  }

  return newProps;
}

function getMappedChildProps(children) {
  if (children instanceof Array) {
    return Children
      .toArray(children)
      .reduce(
        (acc, item) => ({
          ...acc,
          ...getChildMapPropObject(item)
        }),
        {}
      );
  } else if (children instanceof Object) {
    return getChildMapPropObject(children);
  } else {
    return {};
  }
}

export default function FramedContainer(WrappedComponent) {
  return class extends PureComponent {
    static propTypes = {
      children: T.node
    };

    render() {
      const {children} = this.props;
      const newProps = {
        ...this.props,
        ...getMappedChildProps(children)
      };

      return (
        <WrappedComponent
          {...newProps}
        />
      );
    }
  };
}

Screen.jsx

import T from 'prop-types';
import React, {PureComponent} from 'react';
import FramedContainer from './FramedContainer';
import Grid from '@material-ui/core/Grid';

class BaseScreen extends PureComponent {
  static propTypes = {
    header: T.node,
    content: T.node,
    footer: T.node
  };

  render() {
    const {
      header,
      content,
      footer
    } = this.props;

    return (
      <Grid
        container
        direction='column'
      >
        <Grid>
          {header}
        </Grid>
        <Grid>
          {content}
        </Grid>
        <Grid>
          {footer}
        </Grid>
      </Grid>
    );
  }
}

const Screen = FramedContainer(BaseScreen);

export default Screen;