react-cursor-position

react-cursor-position is a primitive component for composing UI features that require notification of cursor and touch position changes. Position coordinates are plotted relative to the HTML element rendered by react-cursor-position.

In the mouse environment it supports scroll position changes during a hover session. In the touch environment, it supports the long press gesture and does not interfere with page or element scrolling.

react-cursor-position re-renders child components with new position props when the cursor or touch position changes.

It is safe for server rendering and single page applications.

Status

Demo

See the react-cursor-position demo site.

Experiment with react-cursor-position live on CodePen.

Installation

npm install --save react-cursor-position

Usage

If you are upgrading from v1x to v2x please see the release notes.

import ReactCursorPosition from 'react-cursor-position';
...

<ReactCursorPosition>
    <YourComponentOne/>
    <YourComponentTwo/>
</ReactCursorPosition>

react-cursor-position wraps its children in a div, which mouse and touch position are plotted relative to.

Each child component will receive the following props:

{
    detectedEnvironment: {
        isMouseDetected: false,
        isTouchDetected: false,
    },
    elementDimensions: {
        width: Number,
        height: Number
    },
    isActive: Boolean,
    isPositionOutside: Boolean,
    position: {
        x: Number,
        y: Number
    }
}

This structure may be customized by implementing mapChildProps API feature.

The information in detectedEnvironment is acquired from interaction with this component and will be unset until the first interaction.

Props API

All props are optional.

className : String - CSS class name(s) to be applied to the div rendered by react-cursor-position.

hoverDelayInMs : Number - Amount of time, in milliseconds, to delay hover interaction from activating. Defaults to 0.

hoverOffDelayInMs : Number - Amount of time, in milliseconds, to delay hover off interaciton from deactivating. Defaults to 0.

isActivatedOnTouch : Boolean - Activate immediately on touch. Scrolling may not be possible when scroll gesture begins on target area. Recommended only when scrolling is not an expected use case. Defaults to false.

mapChildProps : Function - Model child component props to your custom shape. Function receives one parameter with the signature { isActive: Boolean, isPositionOutside: Boolean, position: { x: Number, y: Number } }.
It should return an object that is compatible with the props interface of your child components. See example demo.

onActivationChanged : Function - Called when the component is active. Function receives one parameter with the signature { isActive: Boolean }.

onPositionChanged : Function - Called when cursor or touch position changes. Function receives one parameter with the signature { elementDimensions: { width: Number, height: Number }, isPositionOutside: Boolean, position: { x: Number, y: Number } }.

onDetectedEnvironmentChanged : Function - Called when detected environment (mouse or touch) changes. Function receives one parameter with the signature { isMouseDetected: Boolean, isTouchDetected: Boolean }.

pressDuration : Number - Milliseconds delay before press gesture is activated. Defaults to 500.

pressMoveThreshold : Number - Amount of movement, in pixels, allowed during press gesture detection. Defaults to 5.

shouldDecorateChildren : Boolean - Suppress decoration of child components by setting this prop false. Defaults to true.

style : Object - Style to be applied to the div rendered by react-cursor-position.

See API Examples section of the demo site for more.

Support

Please open an issue.

Example Project

git clone https://github.com/ethanselzer/react-cursor-position.git
cd react-cursor-position
yarn
yarn run build
cd example
yarn
yarn start

If your default browser does not start automatically, open a new browser window and go to localhost:3000

Development

git clone https://github.com/ethanselzer/react-cursor-position.git
cd react-cursor-position
yarn
npm run #print available commands

The Example Project may be used in development of react-cursor-position.

To rebuild the source automatically when changes are made, run yarn run build-watch.

Contributing

Please contribute by opening an issue or a pull request.

Attribution

Thanks to the following community members for opening GitHub Issues and Pull Requests. Your input is very much appreciated!

• @pr0digy
• @JunyuanZheng
• @chrisdrackett
• @AlexMeah
• @bdefore
• @webdobe
• @renchap

You are awesome! ✨💫

License

MIT