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.

Related Project

For hover monitoring, please consider react-hover-observer. It has a similar interface to react-cursor-position, and can be used in combination with it.

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 cursor and touch position are plotted relative to.

Each child component will receive the following props:

{
    isActive: Boolean,
    isPositionOutside: Boolean,
    position: {
        x: Number,
        y: Number
    }
}

This structure may be customized by implementing mapChildProps API feature.

Props API

All props are optional.

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

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

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 { isPositionOutside: Boolean, position: { x: Number, y: Number } }.

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.

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

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.

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.

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/example
npm install
npm 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
npm install
npm run #print available commands

The Example Project may be used in development of react-cursor-position. At this time, the command npm run build-cjs must be run from the root of the project each time you want your ReactCursorPosition changes to be reflected in the example.

Contributing

Please contribute by opening an issue or a pull request.

Attribution

Thanks to the following community members for openening issues

• @pr0digy
• @JunyuanZheng
• @chrisdrackett

You are awesome! ✨💫

License

MIT