V2.0

Support touch environment
Update props API
Support React 15.5.x
Support ES moudles
Support CJS moudules
Improve UMD module - use webpack
Upgrade some dependencies
Introduce webpack bundle analyzer

.babelrc

@@ -1,7 +1,19 @@
 {
     "presets": [
-        "es2015",
+        ["es2015", {
+            "modules": false
+        }],
         "stage-2",
         "react"
-    ]
+    ],
+    "plugins": [
+        "transform-class-properties"
+    ],
+    "env": {
+        "cjs": {
+            "plugins": [
+                "transform-es2015-modules-commonjs"
+            ]
+        }
+    }
 }

.editorconfig

@@ -11,3 +11,10 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -1,51 +1,23 @@
 {
-    "parser": "babel-eslint",
-    "env": {
-        "browser": true,
-        "node": true,
-        "es6": true
-    },
-    "ecmaFeatures": {
-        "modules": true
-    },
-    "rules": {
-        "no-bitwise": 2,
-        "no-else-return": 2,
-        "no-eq-null": 2,
-        "no-extra-parens": 0,
-        "no-floating-decimal": 2,
-        "no-inner-declarations": [2, "both"],
-        "no-lonely-if": 2,
-        "no-multiple-empty-lines": [2, {"max": 3}],
-        "no-self-compare": 2,
-        "no-underscore-dangle": 0,
-        "no-use-before-define": 0,
-        "no-unused-expressions": 0,
-        "no-void": 2,
-        "brace-style": [2, "1tbs"],
-        "camelcase": [1, {"properties": "never"}],
-        "consistent-return": 0,
-        "comma-style": [2, "last"],
-        "complexity": [1, 12],
-        "func-names": 0,
-        "guard-for-in": 2,
-        "indent": [2, 4],
-        "max-len": [0, 120, 4],
-        "new-cap": [2, {"newIsCap": true, "capIsNew": false}],
-        "quotes": [2, "single"],
-        "keyword-spacing": [2, {"before": true, "after": true}],
-        "space-before-blocks": [2, "always"],
-        "array-bracket-spacing": [2, "never"],
-        "space-in-parens": [2, "never"],
-        "strict": [0],
-        "valid-jsdoc": 2,
-        "wrap-iife": [2, "any"],
-        "yoda": [1, "never"]
-    },
+    // https://github.com/facebookincubator/create-react-app/blob/master/packages/eslint-config-react-app/index.js
+    "extends": "react-app",
     "plugins": [
-        "react"
+        "chai-friendly"
     ],
-    "globals": {
-
+    // http://eslint.org/docs/rules/
+    "rules": {
+        "no-unused-expressions": 0,
+        "chai-friendly/no-unused-expressions": 2,
+        "import/default": "warn",
+        "import/export": "warn",
+        "import/named": "warn",
+        "import/namespace": "warn",
+        "import/no-amd": "warn",
+        "import/no-duplicates": "warn",
+        "import/no-extraneous-dependencies": "warn",
+        "import/no-named-as-default": "warn",
+        "import/no-named-as-default-member": "warn",
+        "import/no-unresolved": ["warn", { "commonjs": true }],
+        "indent": ["error", 4]
     }
 }

.gitignore

@@ -2,3 +2,4 @@
 npm-debug.log
 node_modules
 dist
+stats.json

README.md

@@ -1,11 +1,9 @@
 # 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.
 
-React Cursor Position is a primitive component for composing UI features that require notification of
-mouse cursor position status.
+In the mouse environment it supports scroll position changes during a hover session. In the touch environment, it supports the [long press gesture](https://material.io/guidelines/patterns/gestures.html) and does not interfere with page or element scrolling.
 
-It plots cursor coordinates relative to itself and supports scroll position changes.
-
-React Cursor Position re-renders child components with new cursor position props when the cursor position changes.
+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.
 
@@ -19,15 +17,12 @@ It is safe for server rendering and single page applications.
 
 See the [react-cursor-position demo site](https://ethanselzer.github.io/react-cursor-position).
 
-Experiment with React Cursor Position [live on CodePen](http://codepen.io/ethanselzer/pen/ryayLK).
-
-## Related Projects
+Experiment with react-cursor-position [live on CodePen](http://codepen.io/ethanselzer/pen/ryayLK).
 
-For touch position tracking, please consider [react-touch-position](https://www.npmjs.com/package/react-touch-position).
+## Related Project
 
 For hover monitoring, please consider [react-hover-observer](https://www.npmjs.com/package/react-hover-observer).
-
-Both projects have a similar interface to react-cursor-position, and can be used in combination.
+It has a similar interface to react-cursor-position, and can be used in combination with it.
 
 ## Installation
 
@@ -46,36 +41,53 @@ import ReactCursorPosition from 'react-cursor-position';
     <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.
+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:
 
 ```JavaScript
 {
-    x: Number,
-    y: Number,
-    isOutside: Boolean
+    isActive: Boolean,
+    isPositionOutside: Boolean,
+    position: {
+        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-cursor-position.
+All props are optional.
+
+`className` : String - CSS class name(s) 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.
+`style` : Object - Style 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.
+`onActivationChanged` : Function - Called when the component is active.
+Function receives one parameter with the signature `{ isActive: Boolean }`.
 
-`mapChildProps` : Function - Optionally model child component props to your custom shape. Function receives an
-object as input and returns an object that will decorate child components.
+`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](https://ethanselzer.github.io/react-cursor-position/#/map-child-props).
-Defaults to `cursorPosition` structure outlined in [Usage](#usage) section.
 
-`shouldDecorateChildren` : Boolean - Defaults to true. Optionally suppress `cursorPosition` decoration of child components by
-setting this prop false.
+`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](https://ethanselzer.github.io/react-cursor-position/#/) for more.
 
@@ -110,9 +122,6 @@ from your local project change any import of ReactCursorPosition, on files in th
 At this time, the command `npm run prepublsih` must be run from the root of the project each time you want
 your ReactCursorPosition 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
 
@@ -125,6 +134,7 @@ Thanks to the following community members for
 [openening issues](https://github.com/ethanselzer/react-cursor-position/issues?q=is%3Aissue+is%3Aclosed)
 * @pr0digy
 * @JunyuanZheng
+* @chrisdrackett
 
 You are awesome! ✨💫
 

gulpfile.js

@@ -9,9 +9,10 @@ var isparta = require('isparta');
 var runSequence = require('run-sequence');
 
 // Transform all required files with Babel
+process.env.BABEL_ENV = 'cjs';
 require('babel-core/register');
 
-var TEST_FILES = 'src/__tests__/*.spec.js';
+var TEST_FILES = 'test/*.spec.js';
 var SRC_FILES = 'src/*.js';
 
 gulp.task('test', function () {
@@ -51,7 +52,7 @@ gulp.task('test:coveralls', function (done) {
     runSequence('test:coverage', 'coveralls', done);
 });
 
-gulp.task('tdd', function () {
+gulp.task('test:watch', ['test'], function () {
     gulp.watch([
         TEST_FILES,
         SRC_FILES

jsconfig.json

@@ -2,15 +2,15 @@
 	// See https://go.microsoft.com/fwlink/?LinkId=759670
 	// for the documentation about the jsconfig.json format
 	"compilerOptions": {
-		"target": "es6",
-		"module": "commonjs",
-		"allowSyntheticDefaultImports": true
+		"target": "es6"
 	},
 	"exclude": [
 		"coverage",
 		"dist",
-		"example",
 		"node_modules",
-		"scripts"
+		"scripts",
+		"example/build",
+		"example/node_modules",
+		"example/public"
 	]
 }