Basic example of using recompose's branch function

Recompose-example-basic.js

// https://jsfiddle.net/tkh44/ub8s4deb/5/
const h = React.createElement
const { branch, renderComponent } = Recompose

const Box = (props) => {
  return h('pre', { style: { color: props.color, background: 'white', padding: 4 } },
    `props: ${JSON.stringify(props, null, 2)}`
  )
}

const wrapGreen = (Component) => (props) => {
  return h('div', { style: { color: 'white', background: 'green', padding: 8 } },
    h(Component, props)
  )
}

const wrapRed = (Component) => (props) => {
  return h('div', { style: { color: 'white', background: 'red', padding: 8 } },
    h(Component, props)
  )
}

const WrapBox = branch(
  ({ color }) => color === 'green',
  wrapGreen,
  wrapRed
)(Box)

ReactDOM.render(
  h(WrapBox, { color: 'green' }, 'This should render green'),
  document.getElementById('demo1')
)

ReactDOM.render(
  h(WrapBox, { color: 'red' }, 'This should render red'),
  document.getElementById('demo2')
)