Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
use-long-press
Advanced tools
use-long-press - npm Package Compare versions
Comparing version 1.0.5 to 1.1.0
@@ -1,3 +0,3 @@ | ||
| import { MouseEvent, MouseEventHandler, TouchEvent, TouchEventHandler } from 'react'; | ||
| export declare type LongPressEvent<Target = Element> = MouseEvent<Target> | TouchEvent<Target>; | ||
| 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; | ||
@@ -12,4 +12,6 @@ export declare enum LongPressDetectEvents { | ||
| onMouseUp: MouseEventHandler<Target>; | ||
| onMouseMove: MouseEventHandler<Target>; | ||
| onMouseLeave: MouseEventHandler<Target>; | ||
| onTouchStart: TouchEventHandler<Target>; | ||
| onTouchMove: TouchEventHandler<Target>; | ||
| onTouchEnd: TouchEventHandler<Target>; | ||
@@ -19,5 +21,7 @@ } : DetectType extends LongPressDetectEvents.MOUSE ? { | ||
| onMouseUp: MouseEventHandler<Target>; | ||
| onMouseMove: MouseEventHandler<Target>; | ||
| onMouseLeave: MouseEventHandler<Target>; | ||
| } : DetectType extends LongPressDetectEvents.TOUCH ? { | ||
| onTouchStart: TouchEventHandler<Target>; | ||
| onTouchMove: TouchEventHandler<Target>; | ||
| onTouchEnd: TouchEventHandler<Target>; | ||
@@ -29,3 +33,5 @@ } : never; | ||
| detect?: LongPressDetectEvents; | ||
| cancelOnMovement?: boolean | number; | ||
| onStart?: LongPressCallback<Target>; | ||
| onMove?: LongPressCallback<Target>; | ||
| onFinish?: LongPressCallback<Target>; | ||
@@ -32,0 +38,0 @@ onCancel?: LongPressCallback<Target>; |
@@ -1,2 +0,2 @@ | ||
| var e,r=require("react"),t=function(){};(e=exports.LongPressDetectEvents||(exports.LongPressDetectEvents={})).BOTH="both",e.MOUSE="mouse",e.TOUCH="touch",exports.useLongPress=function(e,n){void 0===n&&(n={});var o=n.threshold;void 0===o&&(o=400);var u=n.captureEvent;void 0===u&&(u=!1);var s=n.detect;void 0===s&&(s=exports.LongPressDetectEvents.BOTH);var c=n.onStart;void 0===c&&(c=t);var i=n.onFinish;void 0===i&&(i=t);var v=n.onCancel;void 0===v&&(v=t);var a=r.useRef(!1),f=r.useRef(!1),d=r.useRef(),E=r.useRef(e),l=r.useCallback(function(e){f.current||(u&&e.persist(),u?c(e):c(),f.current=!0,d.current=setTimeout(function(){E.current&&(u?E.current(e):E.current(),a.current=!0)},o))},[c,u,o]),p=r.useCallback(function(e){u&&e.persist(),a.current?u?i(e):i():f.current&&(u?v(e):v()),a.current=!1,f.current=!1,void 0!==d.current&&clearTimeout(d.current)},[u,i,v]);r.useEffect(function(){return function(){void 0!==d.current&&clearTimeout(d.current)}},[]),r.useEffect(function(){E.current=e},[e]);var T={onMouseDown:l,onMouseUp:p,onMouseLeave:p},g={onTouchStart:l,onTouchEnd:p};return null===e?{}:s===exports.LongPressDetectEvents.MOUSE?T:s===exports.LongPressDetectEvents.TOUCH?g:Object.assign({},T,g)}; | ||
| 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){return e.nativeEvent instanceof TouchEvent}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,a=s.threshold,l=void 0===a?400:a,i=s.captureEvent,v=void 0!==i&&i,f=s.detect,p=void 0===f?exports.LongPressDetectEvents.BOTH:f,h=s.cancelOnMovement,E=void 0!==h&&h,g=s.onStart,x=s.onMove,M=s.onFinish,d=s.onCancel,T=n.useRef(!1),O=n.useRef(!1),y=n.useRef(),b=n.useRef(e),L=n.useRef(null),P=n.useCallback(function(e){O.current||(u(e)||r(e))&&(L.current=o(e),v&&e.persist(),v?null==g||g(e):null==g||g(),O.current=!0,y.current=setTimeout(function(){b.current&&(v?b.current(e):b.current(),T.current=!0)},l))},[v,g,l]),D=n.useCallback(function(e){(u(e)||r(e))&&(L.current=null,v&&e.persist(),T.current?v?null==M||M(e):null==M||M():O.current&&(v?null==d||d(e):null==d||d()),T.current=!1,O.current=!1,void 0!==y.current&&clearTimeout(y.current))},[v,M,d]),C=n.useCallback(function(e){if(v?null==x||x(e):null==x||x(),E&&L.current){var n=o(e);if(n){var t=!0===E?25:E,r={x:Math.abs(n.x-L.current.x),y:Math.abs(n.y-L.current.y)};(r.x>t||r.y>t)&&D(e)}}},[D,E,v,x]);n.useEffect(function(){return function(){void 0!==y.current&&clearTimeout(y.current)}},[]),n.useEffect(function(){b.current=e},[e]);var m={onMouseDown:P,onMouseMove:C,onMouseUp:D,onMouseLeave:D},R={onTouchStart:P,onTouchMove:C,onTouchEnd:D};return null===e?{}:p===exports.LongPressDetectEvents.MOUSE?m:p===exports.LongPressDetectEvents.TOUCH?R:t({},m,R)}; | ||
| //# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
| import{useCallback as r,useEffect as n,useRef as t}from"react";var o,e=function(){};function u(u,c){void 0===c&&(c={});var i=c.threshold;void 0===i&&(i=400);var v=c.captureEvent;void 0===v&&(v=!1);var a=c.detect;void 0===a&&(a=o.BOTH);var s=c.onStart;void 0===s&&(s=e);var d=c.onFinish;void 0===d&&(d=e);var f=c.onCancel;void 0===f&&(f=e);var T=t(!1),h=t(!1),O=t(),l=t(u),m=r(function(r){h.current||(v&&r.persist(),v?s(r):s(),h.current=!0,O.current=setTimeout(function(){l.current&&(v?l.current(r):l.current(),T.current=!0)},i))},[s,v,i]),p=r(function(r){v&&r.persist(),T.current?v?d(r):d():h.current&&(v?f(r):f()),T.current=!1,h.current=!1,void 0!==O.current&&clearTimeout(O.current)},[v,d,f]);n(function(){return function(){void 0!==O.current&&clearTimeout(O.current)}},[]),n(function(){l.current=u},[u]);var M={onMouseDown:m,onMouseUp:p,onMouseLeave:p},U={onTouchStart:m,onTouchEnd:p};return null===u?{}:a===o.MOUSE?M:a===o.TOUCH?U:Object.assign({},M,U)}!function(r){r.BOTH="both",r.MOUSE="mouse",r.TOUCH="touch"}(o||(o={}));export{o as LongPressDetectEvents,u as useLongPress}; | ||
| 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){return n.nativeEvent instanceof TouchEvent}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,T=void 0===M?i.BOTH:M,d=v.cancelOnMovement,O=void 0!==d&&d,y=v.onStart,E=v.onMove,m=v.onFinish,x=v.onCancel,g=n(!1),b=n(!1),U=n(),H=n(a),S=n(null),C=t(function(n){b.current||(o(n)||u(n))&&(S.current=c(n),p&&n.persist(),p?null==y||y(n):null==y||y(),b.current=!0,U.current=setTimeout(function(){H.current&&(p?H.current(n):H.current(),g.current=!0)},f))},[p,y,f]),j=t(function(n){(o(n)||u(n))&&(S.current=null,p&&n.persist(),g.current?p?null==m||m(n):null==m||m():b.current&&(p?null==x||x(n):null==x||x()),g.current=!1,b.current=!1,void 0!==U.current&&clearTimeout(U.current))},[p,m,x]),w=t(function(n){if(p?null==E||E(n):null==E||E(),O&&S.current){var t=c(n);if(t){var r=!0===O?25:O,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,O,p,E]);r(function(){return function(){void 0!==U.current&&clearTimeout(U.current)}},[]),r(function(){H.current=a},[a]);var B={onMouseDown:C,onMouseMove:w,onMouseUp:j,onMouseLeave:j},X={onTouchStart:C,onTouchMove:w,onTouchEnd:j};return null===a?{}:T===i.MOUSE?B:T===i.TOUCH?X:e({},B,X)}!function(n){n.BOTH="both",n.MOUSE="mouse",n.TOUCH="touch"}(i||(i={}));export{i as LongPressDetectEvents,a as useLongPress}; | ||
| //# sourceMappingURL=index.module.js.map |
@@ -1,2 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.useLongPress={},e.react)}(this,function(e,t){var n,r=function(){};(n=e.LongPressDetectEvents||(e.LongPressDetectEvents={})).BOTH="both",n.MOUSE="mouse",n.TOUCH="touch",e.useLongPress=function(n,o){void 0===o&&(o={});var u=o.threshold;void 0===u&&(u=400);var c=o.captureEvent;void 0===c&&(c=!1);var s=o.detect;void 0===s&&(s=e.LongPressDetectEvents.BOTH);var i=o.onStart;void 0===i&&(i=r);var f=o.onFinish;void 0===f&&(f=r);var a=o.onCancel;void 0===a&&(a=r);var v=t.useRef(!1),d=t.useRef(!1),l=t.useRef(),E=t.useRef(n),p=t.useCallback(function(e){d.current||(c&&e.persist(),c?i(e):i(),d.current=!0,l.current=setTimeout(function(){E.current&&(c?E.current(e):E.current(),v.current=!0)},u))},[i,c,u]),T=t.useCallback(function(e){c&&e.persist(),v.current?c?f(e):f():d.current&&(c?a(e):a()),v.current=!1,d.current=!1,void 0!==l.current&&clearTimeout(l.current)},[c,f,a]);t.useEffect(function(){return function(){void 0!==l.current&&clearTimeout(l.current)}},[]),t.useEffect(function(){E.current=n},[n]);var g={onMouseDown:p,onMouseUp:T,onMouseLeave:T},h={onTouchStart:p,onTouchEnd:T};return null===n?{}:s===e.LongPressDetectEvents.MOUSE?g:s===e.LongPressDetectEvents.TOUCH?h:Object.assign({},g,h)}}); | ||
| !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){return e.nativeEvent instanceof TouchEvent}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,p=void 0===d?e.LongPressDetectEvents.BOTH:d,h=i.cancelOnMovement,g=void 0!==h&&h,E=i.onStart,y=i.onMove,M=i.onFinish,T=i.onCancel,b=n.useRef(!1),O=n.useRef(!1),x=n.useRef(),L=n.useRef(c),P=n.useRef(null),m=n.useCallback(function(e){O.current||(u(e)||r(e))&&(P.current=o(e),v&&e.persist(),v?null==E||E(e):null==E||E(),O.current=!0,x.current=setTimeout(function(){L.current&&(v?L.current(e):L.current(),b.current=!0)},a))},[v,E,a]),D=n.useCallback(function(e){(u(e)||r(e))&&(P.current=null,v&&e.persist(),b.current?v?null==M||M(e):null==M||M():O.current&&(v?null==T||T(e):null==T||T()),b.current=!1,O.current=!1,void 0!==x.current&&clearTimeout(x.current))},[v,M,T]),C=n.useCallback(function(e){if(v?null==y||y(e):null==y||y(),g&&P.current){var n=o(e);if(n){var t=!0===g?25:g,r={x:Math.abs(n.x-P.current.x),y:Math.abs(n.y-P.current.y)};(r.x>t||r.y>t)&&D(e)}}},[D,g,v,y]);n.useEffect(function(){return function(){void 0!==x.current&&clearTimeout(x.current)}},[]),n.useEffect(function(){L.current=c},[c]);var R={onMouseDown:m,onMouseMove:C,onMouseUp:D,onMouseLeave:D},U={onTouchStart:m,onTouchMove:C,onTouchEnd:D};return null===c?{}:p===e.LongPressDetectEvents.MOUSE?R:p===e.LongPressDetectEvents.TOUCH?U:t({},R,U)}}); | ||
| //# sourceMappingURL=index.umd.js.map |
176
package.json
| { | ||
| "name": "use-long-press", | ||
| "version": "1.0.5", | ||
| "description": "React hook for detecting click (or tap) and hold event. Easy to use, highly customizable options, thoroughly tested.", | ||
| "author": "minwork", | ||
| "license": "MIT", | ||
| "keywords": [ | ||
| "react", | ||
| "hook", | ||
| "click and hold", | ||
| "tap and hold", | ||
| "long press" | ||
| ], | ||
| "repository": "https://github.com/minwork/use-long-press", | ||
| "main": "./dist/index.js", | ||
| "browser": "./dist/index.umd.js", | ||
| "umd:main": "./dist/index.umd.js", | ||
| "jsnext:main": "./dist/index.modern.js", | ||
| "module": "./dist/index.module.js", | ||
| "source": "./src/index.ts", | ||
| "syntax": { | ||
| "esmodules": "./dist/index.modern.js" | ||
| }, | ||
| "types": "./dist/index.d.ts", | ||
| "typings": "./dist/index.d.ts", | ||
| "exports": { | ||
| ".": { | ||
| "browser": "./dist/index.module.js", | ||
| "umd": "./dist/index.umd.js", | ||
| "import": "./dist/index.module.js", | ||
| "require": "./dist/index.js" | ||
| } | ||
| }, | ||
| "files": [ | ||
| "dist/*" | ||
| ], | ||
| "engines": { | ||
| "node": ">=10", | ||
| "npm": ">=5" | ||
| }, | ||
| "scripts": { | ||
| "build": "rimraf dist/* && microbundle --jsx React.createElement --external react --name useLongPress --output dist/index.js", | ||
| "deploy": "yarn test && yarn build && npm publish", | ||
| "test": "jest", | ||
| "start": "microbundle watch", | ||
| "lint": "eslint src tests --ext .ts,.tsx" | ||
| }, | ||
| "babel": { | ||
| "presets": [ | ||
| "@babel/preset-typescript", | ||
| "@babel/preset-react", | ||
| "@babel/preset-env" | ||
| ], | ||
| "plugins": [ | ||
| "@babel/transform-runtime" | ||
| ] | ||
| }, | ||
| "dependencies": {}, | ||
| "peerDependencies": { | ||
| "react": "^16.8.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.2.2", | ||
| "@babel/plugin-transform-runtime": "^7.6.0", | ||
| "@babel/preset-env": "^7.6.0", | ||
| "@babel/preset-typescript": "^7.6.0", | ||
| "@babel/runtime": "^7.6.0", | ||
| "@testing-library/jest-dom": "^5.5.0", | ||
| "@testing-library/react": "^9.1.4", | ||
| "@testing-library/react-hooks": "^2.0.1", | ||
| "@types/enzyme": "^3.10.5", | ||
| "@types/enzyme-adapter-react-16": "^1.0.6", | ||
| "@types/jest": "^23.3.13", | ||
| "@types/react": "^16.7.22", | ||
| "@typescript-eslint/eslint-plugin": "^2.29.0", | ||
| "babel-preset-react": "^6.24.1", | ||
| "cross-env": "^5.2.0", | ||
| "enzyme": "^3.11.0", | ||
| "enzyme-adapter-react-16": "^1.15.2", | ||
| "eslint": "^6.8.0", | ||
| "eslint-config-airbnb": "^18.1.0", | ||
| "eslint-config-airbnb-typescript": "^7.2.1", | ||
| "eslint-config-prettier": "^6.11.0", | ||
| "eslint-plugin-import": "2.20.1", | ||
| "eslint-plugin-jsx-a11y": "6.2.3", | ||
| "eslint-plugin-prettier": "^3.1.3", | ||
| "eslint-plugin-react": "7.19.0", | ||
| "eslint-plugin-react-hooks": "2.5.0", | ||
| "jest": "^24.9.0", | ||
| "microbundle": "^0.11.0", | ||
| "prettier": "^1.18.2", | ||
| "react": "^16.9.0", | ||
| "react-dom": "^16.13.1", | ||
| "react-scripts": "^3.4.1", | ||
| "react-test-renderer": "^16.13.1", | ||
| "rimraf": "^3.0.0", | ||
| "typescript": "^3.2.4" | ||
| "name": "use-long-press", | ||
| "version": "1.1.0", | ||
| "description": "React hook for detecting click (or tap) and hold event. Easy to use, highly customizable options, thoroughly tested.", | ||
| "author": "minwork", | ||
| "license": "MIT", | ||
| "keywords": [ | ||
| "react", | ||
| "hook", | ||
| "click and hold", | ||
| "tap and hold", | ||
| "long press" | ||
| ], | ||
| "repository": "https://github.com/minwork/use-long-press", | ||
| "main": "./dist/index.js", | ||
| "browser": "./dist/index.umd.js", | ||
| "umd:main": "./dist/index.umd.js", | ||
| "jsnext:main": "./dist/index.modern.js", | ||
| "module": "./dist/index.module.js", | ||
| "source": "./src/index.ts", | ||
| "syntax": { | ||
| "esmodules": "./dist/index.modern.js" | ||
| }, | ||
| "types": "./dist/index.d.ts", | ||
| "typings": "./dist/index.d.ts", | ||
| "exports": { | ||
| ".": { | ||
| "browser": "./dist/index.module.js", | ||
| "umd": "./dist/index.umd.js", | ||
| "import": "./dist/index.module.js", | ||
| "require": "./dist/index.js" | ||
| } | ||
| }, | ||
| "files": [ | ||
| "dist/*" | ||
| ], | ||
| "engines": { | ||
| "node": ">=10", | ||
| "npm": ">=5" | ||
| }, | ||
| "scripts": { | ||
| "build": "rimraf dist/* && microbundle --jsx React.createElement --external react --name useLongPress --output dist/index.js", | ||
| "deploy": "yarn test && yarn build && npm publish", | ||
| "test": "jest", | ||
| "start": "microbundle watch", | ||
| "lint": "eslint src tests --ext .ts,.tsx" | ||
| }, | ||
| "dependencies": {}, | ||
| "peerDependencies": { | ||
| "react": "^16.8.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.0.0-0", | ||
| "@babel/plugin-transform-runtime": "^7.14.5", | ||
| "@babel/preset-typescript": "^7.14.5", | ||
| "@testing-library/jest-dom": "^5.14.1", | ||
| "@testing-library/react": "^12.0.0", | ||
| "@testing-library/react-hooks": "^7.0.1", | ||
| "@types/enzyme": "^3.10.9", | ||
| "@types/jest": "^26.0.24", | ||
| "@types/react": "^17.0.14", | ||
| "@typescript-eslint/eslint-plugin": "^4.28.3", | ||
| "@typescript-eslint/parser": "^4.0.0", | ||
| "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2", | ||
| "cross-env": "^7.0.3", | ||
| "enzyme": "^3.11.0", | ||
| "eslint": "^7.30.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", | ||
| "jest": "^27.0.6", | ||
| "microbundle": "^0.13.3", | ||
| "prettier": "^2.3.2", | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2", | ||
| "react-test-renderer": "^17.0.2", | ||
| "rimraf": "^3.0.2", | ||
| "typescript": "^4.3.5" | ||
| } | ||
| } |
@@ -5,12 +5,12 @@ # React Long Press Hook :point_down: | ||
|  | ||
| [](https://travis-ci.com/minwork/use-long-press) | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
| [](https://www.npmjs.com/package/use-long-press) | ||
| [](https://github.com/minwork/use-long-press/blob/master/LICENSE) | ||
| - Easy to use | ||
| - Highly customizable options | ||
| - Thoroughly tested | ||
| - Easy to use | ||
| - Highly customizable options | ||
| - Thoroughly tested | ||
@@ -36,7 +36,7 @@ ## Install | ||
| const Example = () => { | ||
| const bind = useLongPress(() => { | ||
| console.log('Long pressed!'); | ||
| }); | ||
| const bind = useLongPress(() => { | ||
| console.log('Long pressed!'); | ||
| }); | ||
| return <button {...bind}>Press me</button>; | ||
| return <button {...bind}>Press me</button>; | ||
| }; | ||
@@ -67,10 +67,12 @@ ``` | ||
| | 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' | 'touch' | 'both') | 'both' | Which event handlers should be returned in `bind` object. In TS this enum is accessible through `LongPressDetectEvents` | | ||
| | onStart | Function | () => {} | 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 | () => {} | 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 | () => {} | 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`. | | ||
| | 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' | 'touch' | 'both') | 'both' | Which event handlers should be returned in `bind` object. In TS this enum is accessible through `LongPressDetectEvents` | | ||
| | cancelOnMovement | boolean | 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. | | ||
| | 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`. | | ||
@@ -84,31 +86,28 @@ ### Example | ||
| export default function AdvancedExample() { | ||
| const [enabled, setEnabled] = useState(true); | ||
| const callback = useCallback(event => { | ||
| alert('Long pressed!'); | ||
| }, []); | ||
| const bind = useLongPress(enabled ? callback : null, { | ||
| onStart: event => console.log('Press started'), | ||
| onFinish: event => console.log('Long press finished'), | ||
| onCancel: event => console.log('Press cancelled'), | ||
| threshold: 500, | ||
| captureEvent: true, | ||
| detect: 'both', | ||
| }); | ||
| const [enabled, setEnabled] = useState(true); | ||
| const callback = useCallback(event => { | ||
| alert('Long pressed!'); | ||
| }, []); | ||
| const bind = useLongPress(enabled ? callback : null, { | ||
| onStart: event => console.log('Press started'), | ||
| onFinish: event => console.log('Long press finished'), | ||
| onCancel: event => console.log('Press cancelled'), | ||
| onMove: event => console.log('Detected mouse or touch movement'), | ||
| threshold: 500, | ||
| captureEvent: true, | ||
| cancelOnMovement: false, | ||
| detect: 'both', | ||
| }); | ||
| return ( | ||
| <div> | ||
| <button {...bind}>Press and hold</button> | ||
| <div> | ||
| <label htmlFor="enabled"> | ||
| <input | ||
| type="checkbox" | ||
| id="enabled" | ||
| checked={enabled} | ||
| onChange={() => setEnabled(current => !current)} | ||
| /> | ||
| Hook enabled | ||
| </label> | ||
| </div> | ||
| </div> | ||
| ); | ||
| return ( | ||
| <div> | ||
| <button {...bind}>Press and hold</button> | ||
| <div> | ||
| <label htmlFor="enabled"> | ||
| <input type="checkbox" id="enabled" checked={enabled} onChange={() => setEnabled(current => !current)} /> | ||
| Hook enabled | ||
| </label> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
@@ -115,0 +114,0 @@ ``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by36.02%
52077
- Dev dependency count
- decreased by-17.14%
29
- Lines of code
- increased by26.92%
66
Worsened metrics
- Number of lines in readme file
- decreased by-0.86%
115
No dependency changes