use-long-press - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

dist/index.d.ts

@@ -1,40 +0,4 @@
-import { MouseEvent as ReactMouseEvent, MouseEventHandler, TouchEvent as ReactTouchEvent, TouchEventHandler } from 'react';
-export declare type LongPressEvent<Target = Element> = ReactMouseEvent<Target> | ReactTouchEvent<Target>;
-export declare type LongPressCallback<Target = Element> = (event?: LongPressEvent<Target>) => void;
-export declare enum LongPressDetectEvents {
-    BOTH = "both",
-    MOUSE = "mouse",
-    TOUCH = "touch"
-}
-export declare type LongPressResult<Target, DetectType extends LongPressDetectEvents = LongPressDetectEvents.BOTH> = DetectType extends LongPressDetectEvents.BOTH ? {
-    onMouseDown: MouseEventHandler<Target>;
-    onMouseUp: MouseEventHandler<Target>;
-    onMouseMove: MouseEventHandler<Target>;
-    onMouseLeave: MouseEventHandler<Target>;
-    onTouchStart: TouchEventHandler<Target>;
-    onTouchMove: TouchEventHandler<Target>;
-    onTouchEnd: TouchEventHandler<Target>;
-} : DetectType extends LongPressDetectEvents.MOUSE ? {
-    onMouseDown: MouseEventHandler<Target>;
-    onMouseUp: MouseEventHandler<Target>;
-    onMouseMove: MouseEventHandler<Target>;
-    onMouseLeave: MouseEventHandler<Target>;
-} : DetectType extends LongPressDetectEvents.TOUCH ? {
-    onTouchStart: TouchEventHandler<Target>;
-    onTouchMove: TouchEventHandler<Target>;
-    onTouchEnd: TouchEventHandler<Target>;
-} : never;
-export interface LongPressOptions<Target = Element> {
-    threshold?: number;
-    captureEvent?: boolean;
-    detect?: LongPressDetectEvents;
-    filterEvents?: (event: LongPressEvent<Target>) => boolean;
-    cancelOnMovement?: boolean | number;
-    onStart?: LongPressCallback<Target>;
-    onMove?: LongPressCallback<Target>;
-    onFinish?: LongPressCallback<Target>;
-    onCancel?: LongPressCallback<Target>;
-}
-export declare function useLongPress<Target = Element>(callback: null, options?: LongPressOptions<Target>): Record<string, never>;
-export declare function useLongPress<Target = Element, Callback extends LongPressCallback<Target> = LongPressCallback<Target>>(callback: Callback, options?: LongPressOptions<Target>): LongPressResult<Target>;
-export declare function useLongPress<Target = Element, Callback extends LongPressCallback<Target> = LongPressCallback<Target>>(callback: Callback | null, options?: LongPressOptions<Target>): LongPressResult<Target> | Record<string, never>;
+import { CallableContextResult, EmptyObject, LongPressCallback, LongPressOptions, LongPressResult } from './types';
+export declare function useLongPress<Target = Element, Context = unknown>(callback: null, options?: LongPressOptions<Target>): CallableContextResult<EmptyObject, Context>;
+export declare function useLongPress<Target = Element, Callback extends LongPressCallback<Target> = LongPressCallback<Target>, Context = unknown>(callback: Callback, options?: LongPressOptions<Target>): CallableContextResult<LongPressResult<Target>, Context>;
+export declare function useLongPress<Target = Element, Callback extends LongPressCallback<Target> = LongPressCallback<Target>, Context = unknown>(callback: Callback | null, options?: LongPressOptions<Target>): CallableContextResult<LongPressResult<Target> | EmptyObject, Context>;

dist/index.js

@@ -1,2 +0,2 @@
-var e,n=require("react");function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function r(e){var n=e.nativeEvent;return window.TouchEvent?n instanceof TouchEvent:"touches"in n}function u(e){return e.nativeEvent instanceof MouseEvent}function o(e){return r(e)?{x:e.touches[0].pageX,y:e.touches[0].pageY}:u(e)?{x:e.pageX,y:e.pageY}:null}exports.LongPressDetectEvents=void 0,(e=exports.LongPressDetectEvents||(exports.LongPressDetectEvents={})).BOTH="both",e.MOUSE="mouse",e.TOUCH="touch",exports.useLongPress=function(e,c){var s=void 0===c?{}:c,i=s.threshold,a=void 0===i?400:i,l=s.captureEvent,v=void 0!==l&&l,f=s.detect,p=void 0===f?exports.LongPressDetectEvents.BOTH:f,h=s.cancelOnMovement,E=void 0!==h&&h,d=s.filterEvents,g=s.onStart,x=s.onMove,M=s.onFinish,T=s.onCancel,O=n.useRef(!1),y=n.useRef(!1),b=n.useRef(),L=n.useRef(e),P=n.useRef(null),D=n.useCallback(function(e){y.current||(u(e)||r(e))&&(void 0===d||d(e))&&(P.current=o(e),v&&e.persist(),v?null==g||g(e):null==g||g(),y.current=!0,b.current=setTimeout(function(){L.current&&(v?L.current(e):L.current(),O.current=!0)},a))},[v,d,g,a]),C=n.useCallback(function(e){(u(e)||r(e))&&(P.current=null,v&&e.persist(),O.current?v?null==M||M(e):null==M||M():y.current&&(v?null==T||T(e):null==T||T()),O.current=!1,y.current=!1,void 0!==b.current&&clearTimeout(b.current))},[v,M,T]),m=n.useCallback(function(e){if(v?null==x||x(e):null==x||x(),E&&P.current){var n=o(e);if(n){var t=!0===E?25:E,r={x:Math.abs(n.x-P.current.x),y:Math.abs(n.y-P.current.y)};(r.x>t||r.y>t)&&C(e)}}},[C,E,v,x]);n.useEffect(function(){return function(){void 0!==b.current&&clearTimeout(b.current)}},[]),n.useEffect(function(){L.current=e},[e]);var R={onMouseDown:D,onMouseMove:m,onMouseUp:C,onMouseLeave:C},U={onTouchStart:D,onTouchMove:m,onTouchEnd:C};return null===e?{}:p===exports.LongPressDetectEvents.MOUSE?R:p===exports.LongPressDetectEvents.TOUCH?U:t({},R,U)};
+var n,e,t=require("react");function r(){return(r=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n}).apply(this,arguments)}function u(n){var e=n.nativeEvent;return window.TouchEvent?e instanceof TouchEvent:"touches"in e}function o(n){return n.nativeEvent instanceof MouseEvent}function c(n){return u(n)?{x:n.touches[0].pageX,y:n.touches[0].pageY}:o(n)?{x:n.pageX,y:n.pageY}:null}!function(n){n.CANCELED_BY_MOVEMENT="canceled-by-movement",n.CANCELED_BY_TIMEOUT="canceled-by-timeout"}(n||(n={})),function(n){n.BOTH="both",n.MOUSE="mouse",n.TOUCH="touch"}(e||(e={})),exports.useLongPress=function(i,a){var s=void 0===a?{}:a,f=s.threshold,l=void 0===f?400:f,v=s.captureEvent,E=void 0!==v&&v,M=s.detect,h=void 0===M?e.BOTH:M,T=s.cancelOnMovement,d=void 0!==T&&T,p=s.filterEvents,C=s.onStart,O=s.onMove,y=s.onFinish,b=s.onCancel,x=t.useRef(!1),m=t.useRef(!1),_=t.useRef(),g=t.useRef(i),U=t.useRef(null),B=t.useCallback(function(n){return function(e){if(!m.current&&(o(e)||u(e))&&(void 0===p||p(e))){U.current=c(e),E&&e.persist();var t=void 0===n?{}:{context:n};null==C||C(e,t),m.current=!0,_.current=setTimeout(function(){g.current&&(g.current(e,t),x.current=!0)},l)}}},[E,p,C,l]),L=t.useCallback(function(e,t){return function(c){if(o(c)||u(c)){U.current=null,E&&c.persist();var i=void 0===e?{}:{context:e};x.current?null==y||y(c,i):m.current&&(null==b||b(c,r({},i,{reason:null!=t?t:n.CANCELED_BY_TIMEOUT}))),x.current=!1,m.current=!1,void 0!==_.current&&clearTimeout(_.current)}}},[E,y,b]),N=t.useCallback(function(e){return function(t){if(null==O||O(t,{context:e}),d&&U.current){var r=c(t);if(r){var u=!0===d?25:d,o={x:Math.abs(r.x-U.current.x),y:Math.abs(r.y-U.current.y)};(o.x>u||o.y>u)&&L(e,n.CANCELED_BY_MOVEMENT)(t)}}}},[L,d,O]);return t.useEffect(function(){return function(){void 0!==_.current&&clearTimeout(_.current)}},[]),t.useEffect(function(){g.current=i},[i]),t.useMemo(function(){return function(n){var t={onMouseDown:B(n),onMouseMove:N(n),onMouseUp:L(n),onMouseLeave:L(n)},u={onTouchStart:B(n),onTouchMove:N(n),onTouchEnd:L(n)};return null===i?{}:h===e.MOUSE?t:h===e.TOUCH?u:r({},t,u)}},[i,L,h,N,B])};
 //# sourceMappingURL=index.js.map

dist/index.module.js

@@ -1,2 +0,2 @@
-import{useRef as n,useCallback as t,useEffect as r}from"react";function e(){return(e=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&(n[e]=r[e])}return n}).apply(this,arguments)}function u(n){var t=n.nativeEvent;return window.TouchEvent?t instanceof TouchEvent:"touches"in t}function o(n){return n.nativeEvent instanceof MouseEvent}function c(n){return u(n)?{x:n.touches[0].pageX,y:n.touches[0].pageY}:o(n)?{x:n.pageX,y:n.pageY}:null}var i;function a(a,l){var v=void 0===l?{}:l,s=v.threshold,f=void 0===s?400:s,h=v.captureEvent,p=void 0!==h&&h,M=v.detect,d=void 0===M?i.BOTH:M,T=v.cancelOnMovement,E=void 0!==T&&T,O=v.filterEvents,y=v.onStart,m=v.onMove,x=v.onFinish,g=v.onCancel,b=n(!1),U=n(!1),w=n(),H=n(a),S=n(null),C=t(function(n){U.current||(o(n)||u(n))&&(void 0===O||O(n))&&(S.current=c(n),p&&n.persist(),p?null==y||y(n):null==y||y(),U.current=!0,w.current=setTimeout(function(){H.current&&(p?H.current(n):H.current(),b.current=!0)},f))},[p,O,y,f]),j=t(function(n){(o(n)||u(n))&&(S.current=null,p&&n.persist(),b.current?p?null==x||x(n):null==x||x():U.current&&(p?null==g||g(n):null==g||g()),b.current=!1,U.current=!1,void 0!==w.current&&clearTimeout(w.current))},[p,x,g]),B=t(function(n){if(p?null==m||m(n):null==m||m(),E&&S.current){var t=c(n);if(t){var r=!0===E?25:E,e={x:Math.abs(t.x-S.current.x),y:Math.abs(t.y-S.current.y)};(e.x>r||e.y>r)&&j(n)}}},[j,E,p,m]);r(function(){return function(){void 0!==w.current&&clearTimeout(w.current)}},[]),r(function(){H.current=a},[a]);var X={onMouseDown:C,onMouseMove:B,onMouseUp:j,onMouseLeave:j},Y={onTouchStart:C,onTouchMove:B,onTouchEnd:j};return null===a?{}:d===i.MOUSE?X:d===i.TOUCH?Y:e({},X,Y)}!function(n){n.BOTH="both",n.MOUSE="mouse",n.TOUCH="touch"}(i||(i={}));export{i as LongPressDetectEvents,a as useLongPress};
+import{useRef as n,useCallback as t,useEffect as e,useMemo as r}from"react";function o(){return(o=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r])}return n}).apply(this,arguments)}var u,c;function i(n){var t=n.nativeEvent;return window.TouchEvent?t instanceof TouchEvent:"touches"in t}function a(n){return n.nativeEvent instanceof MouseEvent}function v(n){return i(n)?{x:n.touches[0].pageX,y:n.touches[0].pageY}:a(n)?{x:n.pageX,y:n.pageY}:null}function f(f,l){var s=void 0===l?{}:l,E=s.threshold,M=void 0===E?400:E,h=s.captureEvent,T=void 0!==h&&h,d=s.detect,p=void 0===d?c.BOTH:d,O=s.cancelOnMovement,y=void 0!==O&&O,C=s.filterEvents,m=s.onStart,x=s.onMove,_=s.onFinish,b=s.onCancel,U=n(!1),g=n(!1),B=n(),N=n(f),Y=n(null),D=t(function(n){return function(t){if(!g.current&&(a(t)||i(t))&&(void 0===C||C(t))){Y.current=v(t),T&&t.persist();var e=void 0===n?{}:{context:n};null==m||m(t,e),g.current=!0,B.current=setTimeout(function(){N.current&&(N.current(t,e),U.current=!0)},M)}}},[T,C,m,M]),L=t(function(n,t){return function(e){if(a(e)||i(e)){Y.current=null,T&&e.persist();var r=void 0===n?{}:{context:n};U.current?null==_||_(e,r):g.current&&(null==b||b(e,o({},r,{reason:null!=t?t:u.CANCELED_BY_TIMEOUT}))),U.current=!1,g.current=!1,void 0!==B.current&&clearTimeout(B.current)}}},[T,_,b]),w=t(function(n){return function(t){if(null==x||x(t,{context:n}),y&&Y.current){var e=v(t);if(e){var r=!0===y?25:y,o={x:Math.abs(e.x-Y.current.x),y:Math.abs(e.y-Y.current.y)};(o.x>r||o.y>r)&&L(n,u.CANCELED_BY_MOVEMENT)(t)}}}},[L,y,x]);return e(function(){return function(){void 0!==B.current&&clearTimeout(B.current)}},[]),e(function(){N.current=f},[f]),r(function(){return function(n){var t={onMouseDown:D(n),onMouseMove:w(n),onMouseUp:L(n),onMouseLeave:L(n)},e={onTouchStart:D(n),onTouchMove:w(n),onTouchEnd:L(n)};return null===f?{}:p===c.MOUSE?t:p===c.TOUCH?e:o({},t,e)}},[f,L,p,w,D])}!function(n){n.CANCELED_BY_MOVEMENT="canceled-by-movement",n.CANCELED_BY_TIMEOUT="canceled-by-timeout"}(u||(u={})),function(n){n.BOTH="both",n.MOUSE="mouse",n.TOUCH="touch"}(c||(c={}));export{f as useLongPress};
 //# sourceMappingURL=index.module.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e||self).useLongPress={},e.react)}(this,function(e,n){function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function r(e){var n=e.nativeEvent;return window.TouchEvent?n instanceof TouchEvent:"touches"in n}function u(e){return e.nativeEvent instanceof MouseEvent}function o(e){return r(e)?{x:e.touches[0].pageX,y:e.touches[0].pageY}:u(e)?{x:e.pageX,y:e.pageY}:null}var c;e.LongPressDetectEvents=void 0,(c=e.LongPressDetectEvents||(e.LongPressDetectEvents={})).BOTH="both",c.MOUSE="mouse",c.TOUCH="touch",e.useLongPress=function(c,s){var i=void 0===s?{}:s,l=i.threshold,a=void 0===l?400:l,f=i.captureEvent,v=void 0!==f&&f,d=i.detect,h=void 0===d?e.LongPressDetectEvents.BOTH:d,p=i.cancelOnMovement,E=void 0!==p&&p,g=i.filterEvents,T=i.onStart,y=i.onMove,M=i.onFinish,b=i.onCancel,O=n.useRef(!1),x=n.useRef(!1),L=n.useRef(),P=n.useRef(c),m=n.useRef(null),D=n.useCallback(function(e){x.current||(u(e)||r(e))&&(void 0===g||g(e))&&(m.current=o(e),v&&e.persist(),v?null==T||T(e):null==T||T(),x.current=!0,L.current=setTimeout(function(){P.current&&(v?P.current(e):P.current(),O.current=!0)},a))},[v,g,T,a]),C=n.useCallback(function(e){(u(e)||r(e))&&(m.current=null,v&&e.persist(),O.current?v?null==M||M(e):null==M||M():x.current&&(v?null==b||b(e):null==b||b()),O.current=!1,x.current=!1,void 0!==L.current&&clearTimeout(L.current))},[v,M,b]),R=n.useCallback(function(e){if(v?null==y||y(e):null==y||y(),E&&m.current){var n=o(e);if(n){var t=!0===E?25:E,r={x:Math.abs(n.x-m.current.x),y:Math.abs(n.y-m.current.y)};(r.x>t||r.y>t)&&C(e)}}},[C,E,v,y]);n.useEffect(function(){return function(){void 0!==L.current&&clearTimeout(L.current)}},[]),n.useEffect(function(){P.current=c},[c]);var U={onMouseDown:D,onMouseMove:R,onMouseUp:C,onMouseLeave:C},w={onTouchStart:D,onTouchMove:R,onTouchEnd:C};return null===c?{}:h===e.LongPressDetectEvents.MOUSE?U:h===e.LongPressDetectEvents.TOUCH?w:t({},U,w)}});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e||self).useLongPress={},e.react)}(this,function(e,n){function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var u in t)Object.prototype.hasOwnProperty.call(t,u)&&(e[u]=t[u])}return e}).apply(this,arguments)}var u,r;function o(e){var n=e.nativeEvent;return window.TouchEvent?n instanceof TouchEvent:"touches"in n}function c(e){return e.nativeEvent instanceof MouseEvent}function i(e){return o(e)?{x:e.touches[0].pageX,y:e.touches[0].pageY}:c(e)?{x:e.pageX,y:e.pageY}:null}!function(e){e.CANCELED_BY_MOVEMENT="canceled-by-movement",e.CANCELED_BY_TIMEOUT="canceled-by-timeout"}(u||(u={})),function(e){e.BOTH="both",e.MOUSE="mouse",e.TOUCH="touch"}(r||(r={})),e.useLongPress=function(e,f){var a=void 0===f?{}:f,s=a.threshold,l=void 0===s?400:s,v=a.captureEvent,E=void 0!==v&&v,d=a.detect,h=void 0===d?r.BOTH:d,p=a.cancelOnMovement,M=void 0!==p&&p,T=a.filterEvents,y=a.onStart,C=a.onMove,O=a.onFinish,b=a.onCancel,x=n.useRef(!1),m=n.useRef(!1),g=n.useRef(),_=n.useRef(e),L=n.useRef(null),U=n.useCallback(function(e){return function(n){if(!m.current&&(c(n)||o(n))&&(void 0===T||T(n))){L.current=i(n),E&&n.persist();var t=void 0===e?{}:{context:e};null==y||y(n,t),m.current=!0,g.current=setTimeout(function(){_.current&&(_.current(n,t),x.current=!0)},l)}}},[E,T,y,l]),B=n.useCallback(function(e,n){return function(r){if(c(r)||o(r)){L.current=null,E&&r.persist();var i=void 0===e?{}:{context:e};x.current?null==O||O(r,i):m.current&&(null==b||b(r,t({},i,{reason:null!=n?n:u.CANCELED_BY_TIMEOUT}))),x.current=!1,m.current=!1,void 0!==g.current&&clearTimeout(g.current)}}},[E,O,b]),N=n.useCallback(function(e){return function(n){if(null==C||C(n,{context:e}),M&&L.current){var t=i(n);if(t){var r=!0===M?25:M,o={x:Math.abs(t.x-L.current.x),y:Math.abs(t.y-L.current.y)};(o.x>r||o.y>r)&&B(e,u.CANCELED_BY_MOVEMENT)(n)}}}},[B,M,C]);return n.useEffect(function(){return function(){void 0!==g.current&&clearTimeout(g.current)}},[]),n.useEffect(function(){_.current=e},[e]),n.useMemo(function(){return function(n){var u={onMouseDown:U(n),onMouseMove:N(n),onMouseUp:B(n),onMouseLeave:B(n)},o={onTouchStart:U(n),onTouchMove:N(n),onTouchEnd:B(n)};return null===e?{}:h===r.MOUSE?u:h===r.TOUCH?o:t({},u,o)}},[e,B,h,N,U])}});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "use-long-press",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "React hook for detecting click (or tap) and hold event. Easy to use, highly customizable options, thoroughly tested.",
@@ -62,16 +62,18 @@ "author": "minwork",
     "@types/react": "^17.0.14",
-    "@typescript-eslint/eslint-plugin": "^4.28.3",
+    "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^4.0.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
+    "babel-eslint": "^10.0.0",
     "cross-env": "^7.0.3",
     "enzyme": "^3.11.0",
-    "eslint": "^7.30.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint": "^7.5.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^24.0.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.8",
+    "eslint-plugin-testing-library": "^3.9.0",
     "jest": "^27.0.6",
@@ -78,0 +80,0 @@ "microbundle": "^0.13.3",

README.md

@@ -10,3 +10,3 @@ # React Long Press Hook :point_down:
 [![npm](https://img.shields.io/npm/v/use-long-press)](https://www.npmjs.com/package/use-long-press)
-[![GitHub](https://img.shields.io/github/license/minwork/use-long-press)](https://github.com/minwork/use-long-press/blob/master/LICENSE)
+[![Github Stars](https://img.shields.io/github/stars/minwork/use-long-press?style=social)](https://github.com/minwork/use-long-press)
 
@@ -40,7 +40,7 @@ - Easy to use
 
-  return <button {...bind}>Press me</button>;
+  return <button {...bind()}>Press me</button>;
 };
 ```
 
-## Live example
+## Live example (v1)
 
@@ -53,6 +53,8 @@ [![Edit useLongPress](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/uselongpress-gnej6?fontsize=14&hidenavigation=1&theme=dark)
 
-Additionally you can supply _options_ object as a second parameter.
+Additionally, you can supply _options_ object as a second parameter.
 
 As a result hook returns object with various handlers (depending on _detect_ option), which can be spread to some element.
 
+You can supply custom context to the `bind` function like `bind(context)` and then access it from callbacks (`onStart`, `onFinish`, `onCancel`, `onMove`) second argument e.g.: `onStart: (event, { context }) => ...`.
+
 ### Definition
@@ -68,13 +70,13 @@
 
-| Name             |                    Type                    |  Default  | Description                                                                                                                                                                                                                                                                            |
-|------------------|:------------------------------------------:|:---------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| threshold        |                   number                   |    400    | Time user need to hold click or tap before long press _callback_ is triggered                                                                                                                                                                                                          |
-| captureEvent     |                  boolean                   |   false   | If React MouseEvent (or TouchEvent) should be supplied as first argument to callbacks                                                                                                                                                                                                  |
-| detect           | Enum('mouse' &#x7c; 'touch' &#x7c; 'both') |  'both'   | Which event handlers should be returned in `bind` object. In TS this enum is accessible through `LongPressDetectEvents`                                                                                                                                                                |
-| cancelOnMovement |           boolean &#x7c; number            |   false   | If long press should be cancelled when detected movement while pressing. Use _boolean_ value to turn it on / off or _number_ value to specify move tolerance in pixels.<br><br>For more information on how this prop work check JSDoc.                                                 |
-| filterEvents     |             (event) => boolean             | undefined | If provided, it gives you the ability to ignore long press detection on specified conditions (for example on right mouse click). <br><br>When function returns `false`, it will prevent ANY callbacks from triggering (including _onStart_ and _onCancel_) as well as capturing event. |
-| onStart          |                  Function                  | undefined | Called when element is initially pressed (before starting timer which detects long press).<br><br>Can accept mouse or touch event if _captureEvents_ option is set to `true`.                                                                                                          |
-| onFinish         |                  Function                  | undefined | Called when press is released (after triggering _callback_).<br><br>Can accept mouse or touch event if _captureEvents_ option is set to `true`.                                                                                                                                        |
-| onCancel         |                  Function                  | undefined | Called when press is released before _threshold_ time elapses, therefore before long press occurs.<br><br>Can accept mouse or touch event if _captureEvents_ option is set to `true`.                                                                                                  |
-| onMove           |                  Function                  | undefined | Handler for `onTouchMove` and `onMouseMove` props, also allowing to make some operations on event before triggering _cancelOnMovement_.<br><br>Can accept mouse or touch event if _captureEvents_ option is set to `true`.                                                             |
+| Name             |                    Type                    |  Default  | Description                                                                                                                                                                                                                                                                                               |
+|------------------|:------------------------------------------:|:---------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| threshold        |                   number                   |    400    | Time user need to hold click or tap before long press _callback_ is triggered                                                                                                                                                                                                                             |
+| captureEvent     |                  boolean                   |   false   | If React MouseEvent (or TouchEvent) should be supplied as first argument to callbacks                                                                                                                                                                                                                     |
+| detect           | Enum('mouse' &#x7c; 'touch' &#x7c; 'both') |  'both'   | Which event handlers should be returned in `bind` object. In TS this enum is accessible through `LongPressDetectEvents`                                                                                                                                                                                   |
+| cancelOnMovement |           boolean &#x7c; number            |   false   | If long press should be cancelled when detected movement while pressing. Use _boolean_ value to turn it on / off or _number_ value to specify move tolerance in pixels.<br><br>For more information on how this prop work check JSDoc.                                                                    |
+| filterEvents     |             (event) => boolean             | undefined | If provided, it gives you the ability to ignore long press detection on specified conditions (for example on right mouse click). <br><br>When function returns `false`, it will prevent ANY callbacks from triggering (including _onStart_ and _onCancel_) as well as capturing event.                    |
+| onStart          |                  Function                  | undefined | Called when element is initially pressed (before starting timer which detects long press).<br><br>Can accept mouse or touch event if _captureEvents_ option is set to `true`.                                                                                                                             |
+| onFinish         |                  Function                  | undefined | Called when press is released (after triggering _callback_).<br><br>Can accept mouse or touch event if _captureEvents_ option is set to `true`.                                                                                                                                                           |
+| onCancel         |                  Function                  | undefined | Called when press is released before _threshold_ time elapses, therefore before long press occurs.<br><br>Can accept mouse or touch event if _captureEvents_ option is set to `true`. You can obtain reason for cancellation from a second callback argument e.g.: `onCancel: (event, { reason }) => ...` |
+| onMove           |                  Function                  | undefined | Handler for `onTouchMove` and `onMouseMove` props, also allowing to make some operations on event before triggering _cancelOnMovement_.<br><br>Can accept mouse or touch event if _captureEvents_ option is set to `true`.                                                                                |
 
@@ -106,3 +108,3 @@ ### Example
     <div>
-      <button {...bind}>Press and hold</button>
+      <button {...bind()}>Press and hold</button>
       <div>
@@ -109,0 +111,0 @@ <label htmlFor="enabled">

No alert changes

Improved metrics

Total package byte prevSize

64939

increased by18.3%

Number of package files

12

increased by20%

Lines of code

92

increased by35.29%

Number of lines in readme file

119

increased by1.71%

Worsened metrics

Dev dependency count

33

increased by6.45%

No dependency changes