Recompose Base Fiddle

Starting point for creating JSFiddles with Recompose. Forked from React Base Fiddle.

by Kye Hohenberger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://npmcdn.com/[email protected]/build/Recompose.js"></script>
<div id="demo1"></div>
<div id="demo2"></div>

Babel + JSX

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')
)