Recompose: branch

branch.jsx

import React from 'react';
import { render } from 'react-dom';
import { branch, renderComponent, renderNothing } from 'recompose';

// Define a stateless React component
const HelloWorld = () => <p>Hello World!</p>;

// Defines an higher order component using branch:
// - The first parameter is a function that
//   returns true or false. In this case
//   we check the value of the enabled prop.
//
// - The second parameter is the left condition,
//   called when the condition is true. In this
//   case we render the component HelloWorld.
//
// - The third optional parameter is the right
//   condition, what happens when the condition
//   is false.
const hoc = branch(
  props => props.enabled === true,
  renderComponent(HelloWorld),
  renderNothing,
);

// To demonstrate how the defined higher order
// component works let's try to pass different
// values for the enabled prop.
const App = () =>
  <div>
    <div>
      <strong>With the enabled prop set to true:</strong>
      {hoc()({ enabled: true })}
    </div>

    <div>
      <strong>With the enabled prop set to false:</strong>
      {hoc()({ enabled: false })}
    </div>
  </div>;

render(<App />, document.getElementById('root'));