React Layout Resolver

index.js

import React from "react"

const Foo = () => {
  const header = <p key="foo-header">Foo Header</p>
  const main = <p key="foo-main">Foo Main</p>
  const footer = <p key="foo-footer">Foo Footer</p>
  return {
    header: [header],
    main: [main],
    footer: [footer]
  }
}

const Bar = () => {
  const header = <p key="bar-header">Bar Header</p>
  const main = <p key="bar-main">Bar Main</p>
  const footer = <p key="bar-footer">Bar Footer</p>
  return {
    header: [header],
    main: [main],
    footer: [footer]
  }
}

const Baz = () => {
  const header = <p key="baz-header">Baz Header</p>
  const main = <p key="baz-main">Baz Main</p>
  const footer = <p key="baz-footer">Baz Footer</p>
  return {
    header: [header],
    main: [main],
    footer: [footer]
  }
}

const Layout = ({ regions }) => (
  <div>
    <header>{ regions.header }</header>
    <main>{ regions.main }</main>
    <footer>{ regions.footer }</footer>
  </div>
)

const withLayout = (Layout, ...components) => {
  const regions = {}

  // Map component regions.
  components.map(component => {
    const items = component()
    Object.keys(items).map(key => {
      if (!regions.hasOwnProperty(key))
        regions[key] = []
      regions[key].push(items[key])
    })
  })

  return <Layout regions={ regions } />
}

withLayout(Layout, Bar, Baz, Foo)