recompose-functional-component-abstract.js

import {compose, setPropTypes, defaultProps, withHandlers, componentFromProp, setDisplayName} from 'recompose'

const componentEnhance = defaultProps({ component: 'button' })
const ButtonComponent = componentEnhance(componentFromProp('component'))

const enhance = compose(
  setDisplayName(`Button`),
  setPropTypes({
    onClick: PropTypes.func,
    type: PropTypes.oneOf(['submit', 'button']),
    className: PropTypes.func,
    children: PropTypes.func.isRequired,
    isLoading: PropTypes.bool,
  }),
  defaultProps({
    type: 'button',
  }),
  withHandlers({
    onClick: props => e => {
      // first do something other than what was passed
      doSomethingDifferentHere()

      // if an onClick method was passed, do it
      props.onClick && props.onClick(e)
    },
    onHover: props => e => {
      // this function was not originally passed as a prop;
      // it was created here. when recompose did it's magic,
      // the component had it available as a prop!
      lookMomImHovering()
    },
  }),
)

const Button = ({ type, className, children, onClick, isLoading, onHover, ...props }) => {
  return (
    <ButtonComponent type={type} className={className} onClick={onClick} onMouseMove={onHover} {...props}>
      {isLoading && <Loading />}
      {!isLoading && children}
    </ButtonComponent>
  )
}

export default enhance(Button)