Split a properties object into multiple objects based on the propTypes definitions of components.

splitProps.js

/**
 * Split a properties object into multiple objects based on the
 * propTypes definitions of components.
 *
 * Usage:
 *
 *     const [modalProps, dialogUIProps, otherProps] =
          splitProps(this.props, Modal, DialogUI);
 *
 * Why?
 *
 * Sometimes, separating out which props to pass to a child component,
 * and which to keep for youself can become very verbose. If a child
 * component adds properties, you need to explicitly make wrappers
 * support those new properities, too.
 */
export function splitProps(props, ...subComponents) {
  const result = [];
  const usedProps = new Set();
  props = {...props};

  for (let component of subComponents) {
    const propsForComponent = {};
    result.push(propsForComponent);

    Object.keys(component.propTypes).forEach(propName => {
      // Make sure a prop is not used in two sub components.
      if (usedProps.has(propName)) {
        console.warn(`${propName} is used twice!`);
      }
      usedProps.add(propName);

      if (props[propName] === undefined)
        return;

      propsForComponent[propName] = props[propName];
      delete props[propName];
    });
  }

  result.push(props);
  return result;
}