recompose-function-component-withhandlers.js

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

const enhance = compose(
  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 }) => {
  return (
    <button type={type} className={className} onClick={onClick} onMouseMove={onHover}>
      {isLoading && <Loading />}
      {!isLoading && children}
    </button>
  )
}

export default enhance(Button)