Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Hover Component Decorator
import React, {Component} from 'react'
export default DecoratedComponent =>
class extends Component {
state = {
hover: false,
}
toggleHover = () =>
this.setState({hover: !this.state.hover})
render() {
return <span onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} >
<DecoratedComponent {...this.props} hover={this.state.hover}/>
</span>
}
}
@HoverDecorator
class Maurice extends Component {
render() {
let {hover} = this.props,
style = {background: hover ? 'blue' : 'red'}
return (
<span
style={labelStyle}>
LALALA
</span>
)
}
}
// Then in a render method, <Maurice />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment