react-touch-position

react-touch-position

React Touch Position is a primitive component for composing UI features that require notification of touch position status.

It plots touch coordinates relative to itself and re-renders child components with new touch position props when touch position changes.

React Touch Position Supports the long press gesture and does not interfere with page or element scrolling.

It is safe for server rendering and cleans up after unmount on the client.

Status

Demo

Please see the react-touch-position demo site.

Experiment with react-touch-position live on CodePen.

Related Project

For mouse position tracking, please consider react-cursor-position.

Installation

npm install --save react-touch-position

Usage

import ReactTouchPosition from 'react-touch-position';
...
<ReactTouchPosition>
    <YourComponentOne/>
    <YourComponentTwo/>
</ReactTouchPosition>

ReactTouchPosition wraps its children in a div, which touch position is plotted relative to.

Each child component will receive the following props:

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

This structure may be customized by implementing mapChildProps API feature.

Props API

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

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

isActivatedOnTouch : Boolean - Optionally 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.

mapChildProps : Function - Optionally model child component props to your custom shape. Function receives one parameter with the signature { isActive, isPositionOutside, touchPosition }, and returns an object that is compatible with the props interface of your components.

onActivationChanged : Function - Optionally provide a function that will be called when the component is active. Function receives one parameter with the signature { isActive }

onPositionChanged : Function - Optionally provide a function that will be called when touch position changes. Function will receive an object with the signature { isPositionOutside, touchPosition: { x, y } }, as a single parameter.

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

pressMoveThreshold: Number - Amount of movement allowed during press event detection. Defaults to 5.

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

Support

Please open an issue.

Example Project

git clone https://github.com/ethanselzer/react-touch-position.git
cd react-touch-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-touch-position.git
cd react-touch-position
npm install
npm run #print available commands

The Example Project may be used in development of react-touch-position. To import ReactTouchPosition from your local project change any import of ReactTouchPosition, on files in the components folder, to:

import ReactTouchPosition from '../../../dist/ReactTouchPosition';

The command npm run prepublsih must be run from the root of the project each time you want your ReactTouchPosition changes to be reflected in the example.

If you experience ReferenceError: Unknown plugin "'transform-es2015-modules-umd'" when running prepublish you may try running npm run prepublish-cjs instead.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

License

MIT