React cursor detection

A react component that detects the coordinates of the mouse relative to the component. An example can be found here.

Install

npm i react-cursor-detection

Usage

TypeScript

// App.tsx
import React from "react";
import ReactCursorDetection from "react-cursor-detection";
import ExampleUsage from "ExampleUsage";

export default function App() {
    return <ReactCursorDetection>{(props) => <ExampleUsage {...props} />}</ReactCursorDetection>;
}

// ExampleUsage.tsx
import React from "react";
import { ICursorDetectionPassThroughProps } from "react-cursor-detection";

interface IProps extends ICursorDetectionPassThroughProps {}

export default function ExampleUsage(props: IProps) {
    const { isActive, position } = props;
    const { x, y } = position;

    return (
        <div>
            <p>isActive: {isActive ? "true" : "false"}</p>
            <p>
                x: {x}, y: {y}
            </p>
        </div>
    );
}

Development

Setup

Module

Install dependencies:

npm install

This should install dependencies for both the module and the example project (currently only works in linux). If the example project dependencies fail, then please follow the example cra dependency installation instructions.

To run in watch mode:

npm start

To build:

npm run build

Example create-react-app project

First, cd into the example directory:

cd example

Install dependencies:

npm install

To run development server:

npm start

To build:

npm run build

Contributing

Please read CONTRIBUTING.md.

Credit

This project is based on this solution, but has now diverted significantly.