Recompose Base Fiddle

Using branch to conditionally wrap components.

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 { branch } = Recompose

// Box is a normal component
const Box = props => {
  return (
    <pre
      style={{
        color: props.color,
        background: 'white',
        padding: 4
      }}
    >
      {JSON.stringify(props, null, 2)}
    </pre>
  )
}

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

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

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

ReactDOM.render(
  <WrappedBox color={'green'}>This should be render green</WrappedBox>,
  document.getElementById('demo1')
)

ReactDOM.render(
  <WrappedBox color={'red'}>This should be render red</WrappedBox>,
  document.getElementById('demo2')
)