Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple higher-order React component to make a compoent react to hover events.
function hoverable (WrappedComponent, propName = 'hover') {
return class HoverableComponent extends Component {
constructor (props) {
super(props)
this.state = { hovered: false }
}
turnHoverOn () {
this.setState({ hovered: true })
}
turnHoverOff () {
this.setState({ hovered: false })
}
render () {
const props = { [propName]: this.state.hovered, ...this.props }
return (
<div onMouseEnter={() => this.turnHoverOn()} onMouseLeave={() => this.turnHoverOff()}>
<WrappedComponent { ...props } />
</div>
)
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment