react-cursor-detection
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published

    React cursor detection

    NPM-VERSION LICENSE coverage report

    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.

    Install

    npm i react-cursor-detection

    DownloadsWeekly Downloads

    5

    Version

    1.0.7

    License

    GPL-3.0-only

    Unpacked Size

    91.3 kB

    Total Files

    16

    Last publish

    Collaborators

    • straight-outta-crompton