Package Exports

react-cursor-position

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-cursor-position) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-cursor-position

A React component that decorates its children with mouse cursor coordinates plotted relative to itself.

Supports scroll position changes between and during active hover sessions.

Intended as a primitive for composing UI features that require notification of mouse cursor position status.

Safe for server rendering and single page applications.

Status

Demo

The react-image-magnify project depends on this package for mouse coordinate observation. Please have a look at the react-image-magnify demo to see this package in action.

For touch position tracking, please consider react-touch-position.

For hover monitoring, please consider react-hover-observer.

Both projects have a similar interface.

Installation

npm install --save react-cursor-position

Usage

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

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

ReactCursorPosition wraps its children in a div, which mouse cursor position is plotted relative to.

Each child component will receive a prop named cursorPosition, which has the following structure. This structure, and property name, may also be altered by implementing the optional mapChildProps feature.

{
    x: Number,
    y: Number,
    isOutside: Boolean
}

Props API

className : String - Optionally provide a CSS class to be applied to the div rendered by react-cursor-position.

style : Object - Optionally provide a style object to be applied to the div rendered by react-cursor-position.

onCursorPositionChanged : Function - Optionally provide a function that will be called when mouse cursor position changes. Function will receive cursorPosition object as parameter.

mapChildProps : Function - Optionally model child component props. Function receives an object as input and returns an object that will decorate child components. See example code. Defaults to cursorPosition structure outlined in Usage section.

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

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

Contributing

Please contribute by opening an issue or a pull request.

Attribution

Thanks to the following community members for openening issues

@pr0digy
@JunyuanZheng

You are awesome! ✨💫

License

MIT