clicknhold/dist/index.esm.min.js

React hook for handling click and hold events

import{useState as n,useRef as o,useCallback as e,useEffect as t}from"react";function r(r){var u=void 0===r?{}:r,i=u.duration,c=void 0===i?2e3:i,l=u.onComplete,a=u.onStart,d=u.onCancel,v=u.onProgress,f=u.disabled,s=void 0!==f&&f,p=n(!1),w=p[0],y=p[1],D=o(),g=o(),h=e((function(){D.current&&(window.clearInterval(D.current),D.current=void 0),g.current=void 0,y(!1)}),[]),k=e((function(n){"preventDefault"in n&&n.preventDefault(),s||(g.current=Date.now(),y(!0),null==a||a(),D.current=window.setInterval((function(){var n=Date.now()-g.current,o=Math.min(n/c,1);null==v||v(o),n>=c&&(h(),null==l||l())}),16))}),[c,l,a,v,h,s]),m=e((function(){w&&(h(),null==d||d())}),[w,h,d]),M=e((function(n){"Enter"!==n.key&&" "!==n.key||k(n)}),[k]),E=e((function(n){"Enter"!==n.key&&" "!==n.key||m()}),[m]);return t((function(){return h}),[h]),{isHolding:w,handlers:{onMouseDown:k,onMouseUp:m,onMouseLeave:m,onTouchStart:k,onTouchEnd:m,onKeyDown:M,onKeyUp:E},startHolding:k,stopHolding:m}}export{r as useClicknHold};