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.

Safe for server rendering.

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

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

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.

{
    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 the mouse cursor position changes. Function will receive cursorPosition object as parameter.

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 using Github Flow. Create a branch, add commits, and open a pull request.

Attribution

Thanks to the following community members for Openening Issues

@pr0digy
@JunyuanZheng

You are awesome! ✨💫

License

MIT