[Recompose] Set the HTML Tag of a Component via a Prop using Recompose

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 for a or even a react router depending on circumstance.

const { Component } = React;
const { compose, componentFromProp, withProps } = Recompose;


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

 

Passing the props:

const App = () =>
  <div className="App">
    <Link to="#/page1">Anchor Link</Link>
    <Link type="button" to="#/page2">Button Link</Link>
  </div>