Render Components as String

render.js

const renderProp = (key, val) => {
  const type = typeof val;

  if (type === 'string' && !val) return null;
  if (type === 'object' && !Object.keys(val).length) return null;

  switch (type) {
    case 'number':
      return `${key}={${val}}`;
    case 'string':
      return `${key}="${val}"`;
    case 'object':
      return `${key}="${JSON.stringify(val)}"`;
    case 'function':
      return `${key}={Function}`;
    default:
      return null;
  }
};

const renderProps = props =>
  Object.keys(props).reduce((str, prop) => {
    if (prop !== 'children') {
      const attr = renderProp(prop, props[prop]);

      if (attr) str += ` ${attr}`;
    }
    return str;
  }, '');

const renderChildren = children =>
  children.map(
    child =>
      `<${child.type.displayName || child.type.name}${renderProps(
        child.props
      )}${child.props.children && child.props.children.length ? '' : ' /'}>

      ${
        typeof child.props.children === 'string'
          ? child.props.children
          : child.props.children &&
            child.props.children.length &&
            child.props.children.map
            ? renderChildren(child.props.children)
            : ''
      }

      ${
        child.props.children
          ? `</${child.type.displayName || child.type.name}>`
          : ''
      }
      `
  );