MouseContext Component

MouseCursorContext

import React, { Component } from 'react';

const {
	Provider: MouseCursorProvider,
	Consumer: MouseCursorContextConsumer
} = React.createContext();

export class MouseCursorContextProvider extends Component {
	state = {
		screenX: null,
		screenY: null,
		horizontal: null,
		vertical: null
	};
	componentDidMount() {
		window.addEventListener('mousemove', this.handleMouseMove);
	}
	componentWillUnmount() {
		window.removeEventListener('mousemove', this.handleMouseMove);
	}
	handleMouseMove = e => {
		let horizontal = e.screenX < window.innerWidth / 2 ? 'left' : 'right';
		let vertical = e.screenY < window.innerWidth / 2 ? 'top' : 'right';

		this.setState({
			mouseX: e.screenX,
			mouseY: e.screenY,
			horizontal: horizontal,
			vertical: vertical
		});
	};
	render() {
		return <MouseCursorProvider value={this.state} {...this.props} />;
	}
}

export const WithMouseCursor = MouseCursorComponent => props => (
	<MouseCursorContextConsumer>
		{data => <MouseCursorComponent {...props} mousecursor_context={data} />}
	</MouseCursorContextConsumer>
);

export default {
	MouseCursorContextProvider,
	WithMouseCursor
};