Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment