Skip to content

Instantly share code, notes, and snippets.

@mtomcal
Created September 14, 2017 22:13
Show Gist options
  • Save mtomcal/f972ba26412da41654d165debd3f6f8e to your computer and use it in GitHub Desktop.
Save mtomcal/f972ba26412da41654d165debd3f6f8e to your computer and use it in GitHub Desktop.
Adapting HoC to RenderProps
////////////////////////////////////////////////////////////////////////////////
// Exercise:
//
// Make `withMouse` a "higher-order component" that sends the mouse position
// to the component as props.
//
// Hint: use `event.clientX` and `event.clientY`
//
// Got extra time?
//
// Make a `withCat` HOC that shows a cat chasing the mouse around the screen!
////////////////////////////////////////////////////////////////////////////////
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import * as styles from './styles'
const withMouse = ({ message }) => (Component) => {
return class WithMouse extends React.Component {
displayName = 'WithMouse'
state = {
clientX: 0,
clientY: 0
}
handleMouse = (event) => {
const { clientX, clientY } = event
this.setState(() => {
return {
clientX: clientX,
clientY: clientY
}
})
}
render() {
return (
<div>
{message}
<Component {...this.props} mouse={{ x: this.state.clientX, y: this.state.clientY }} onMouseMove={this.handleMouse}/>
</div>
)
}
}
}
function WithMouseHoF({ mouse, onMouseMove, children }) {
return <div>{React.Children.only(children({ mouse, onMouseMove }))}</div>
}
class WithMouseAdaptor extends React.Component {
render() {
const Component = withMouse(this.props)(WithMouseHoF)
return (
<Component>
{this.props.children}
</Component>
)
}
}
class App extends React.Component {
render() {
return (
<WithMouseAdaptor message="Cool">
{({ mouse, onMouseMove }) => (
<div style={styles.container} onMouseMove={onMouseMove}>
{mouse ? (
<h1>The mouse position is ({mouse.x}, {mouse.y})</h1>
) : (
<h1>We don't know the mouse position yet :(</h1>
)}
</div>
)}
</WithMouseAdaptor>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment