Minimum viable higher-order component utility library.

Use in conjunction with something like Rambda's pipe or Lodash's flow. Or just use recompose :)

Let's notate a React Component with a Unicode fat arrow: props ⇒ element

// mapProps : (props₁ → props₂) → (props₂ ⇒ element) → (props₁ ⇒ element)
const mapProps = (f) => (component) => (props) => createElement(component, f(props));

Precomposes your component with a props transformation.

// mapElement : (element₁ → element₂) → (props ⇒ element₁) → (props ⇒ element₂)
const mapElement = (f) => (component) => (props) => f(createElement(component, props));

Postcomposes your component with an element transformation.

If you were a keen Haskeller, you would've noticed that mapProps looks like an lmap, and mapElement looks like an rmap.