React Higher-Order-Component withMouse

React-HOC

import React, { Component } from 'react';
import PropTypes from 'prop-types';

const withMouse = (WrappedComponent) => {
  return class extends Component {
    state = {
      x: 0,
      y: 0,
    }

    onMouseMove = (e) => {
      this.setState({
        x: e.clientX,
        y: e.clientY,
      })
    }

    render() {
      return (
        <div onMouseMove={this.onMouseMove}>
          <WrappedComponent {...this.props} mouse={this.state}/>
        </div>
      )
    }
  }
}

@withMouse
export default class Content extends Component {
  static propTypes = {
    mouse: PropTypes.object,
  }

  render() {
    const { mouse } = this.props;

    return (
      <div className="content">
        {`mouse position: (${mouse.x}, ${mouse.y})`}
      </div>
    );
  }
}