timkindberg/egghead-recompose: Master Higher Order Components with Functional Patterns Using Recompose

{
  "presets": ["es2015", "react", "stage-2"]
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://npmcdn.com/react@latest/dist/react.js"></script>
  <script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
  <script src="https://npmcdn.com/recompose@latest/build/Recompose.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="main"></div>
  <script src="index.js"></script>
</body>
</html>

/*
TITLE:
Set the HTML Tag of a Component via a Prop using Recompose

DESCRIPTION:
Learn how to user the ‘componentFromProp’ helper and ‘defaultProps’
higher order component to swap the underlying html tag of your
component. Sometimes we want a component to behave the same overall
but to use a different element in the HTML output. An example is
swapping an <a> for a <button> or even a react router <Link>
depending on circumstance.
*/
const { Component } = React;
const { compose, componentFromProp, withProps } = Recompose;

const Link = compose(
  withProps(({ type='a', to='#' }) =>
    type === 'a'
      ? { type, href: to }
      : { type, onClick(e) { window.location=to }})
)(componentFromProp('type'));

const App = () =>
  <div className="App">
    <a href="#/page1">Anchor Link</a>
    <button onClick={ window.location="#/page2" }>Button Link</button>
    <Link to="#/page1">Anchor Link</Link>
    <Link type="button" to="#/page2">Button Link</Link>
  </div>

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

.App {
  margin-top: 50px;
  text-align: center;
  font-size: 18px;
  font-family: Rockwell, “Courier Bold”, Courier, Georgia, Times, “Times New Roman”, serif;
}

button {
  -webkit-style: none;
  border: 0;
  padding: 10px 15px;
  font-size: inherit;
  border-radius: 2px;
  cursor: pointer;
  background-color: lightblue;
  color: #333;
  margin-top: 20px;
}