clicknhold
Version:
React hook for handling click and hold events
2 lines (1 loc) • 1.28 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).clicknhold={},e.React)}(this,(function(e,n){"use strict";e.useClicknHold=function(e){var o=void 0===e?{}:e,t=o.duration,u=void 0===t?2e3:t,r=o.onComplete,l=o.onStart,i=o.onCancel,c=o.onProgress,a=o.disabled,s=void 0!==a&&a,f=n.useState(!1),d=f[0],p=f[1],v=n.useRef(),k=n.useRef(),y=n.useCallback((function(){v.current&&(window.clearInterval(v.current),v.current=void 0),k.current=void 0,p(!1)}),[]),b=n.useCallback((function(e){"preventDefault"in e&&e.preventDefault(),s||(k.current=Date.now(),p(!0),null==l||l(),v.current=window.setInterval((function(){var e=Date.now()-k.current,n=Math.min(e/u,1);null==c||c(n),e>=u&&(y(),null==r||r())}),16))}),[u,r,l,c,y,s]),h=n.useCallback((function(){d&&(y(),null==i||i())}),[d,y,i]),w=n.useCallback((function(e){"Enter"!==e.key&&" "!==e.key||b(e)}),[b]),C=n.useCallback((function(e){"Enter"!==e.key&&" "!==e.key||h()}),[h]);return n.useEffect((function(){return y}),[y]),{isHolding:d,handlers:{onMouseDown:b,onMouseUp:h,onMouseLeave:h,onTouchStart:b,onTouchEnd:h,onKeyDown:w,onKeyUp:C},startHolding:b,stopHolding:h}}}));