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="container"></div>

Babel + JSX

const h = React.createElement
const { branch } = Recompose

const Number = ({ number }) => h('div', {}, number)

// Take a component, C, and add one to its number prop
const addOne = (C) =>
  (props) => h(C, { ...props, number: props.number + 1 })

// Take a component, C, and subtract one from its number prop
const subtractOne = (C) =>
  (props) => h(C, { ...props, number: props.number - 1 })

// If number is greater than or equal to 3 apply subtractOne
// else apply addOne to Number
const BranchedNumber = branch(
  ({ number }) => number >= 3,
  subtractOne,
  addOne
)(Number)

ReactDOM.render(
  h(BranchedNumber, { number: 3 }),	// Renders 2
  document.getElementById('container')
)