react-watchman
Version:
A human behavior-aware idle detector for React applications. Combines user activity signals with AI-inspired heuristics to detect inactivity intelligently. Ideal for SaaS, banking, and secure apps requiring session timeout and idle monitoring.
3 lines (2 loc) • 2.88 kB
JavaScript
;var e=require("react"),n=require("react/jsx-runtime");function o(n){var o=void 0===n?{}:n,t=o.idleTime,i=void 0===t?3e4:t,r=o.onIdle,u=o.onActive,c=o.sensitivity,l=void 0===c?1:c,s=o.debounce,a=void 0===s?250:s,d=o.onVisibilityChange,v=o.onTabHide,f=o.onTabShow,b=o.onFocus,w=o.onBlur,m=e.useState(!1),h=m[0],g=m[1],T=e.useRef(!1),y=e.useRef(null),E=e.useRef(Date.now()),C=e.useRef(null),L=e.useRef(null),k=i*l,x=e.useCallback((function(){T.current||(T.current=!0,g(!0),null==r||r())}),[r]),I=e.useCallback((function(){T.current&&(T.current=!1,g(!1),null==u||u())}),[u]),R=e.useCallback((function(){y.current&&clearTimeout(y.current),y.current=setTimeout((function(){Date.now()-E.current>=k?x():R()}),k)}),[x,k]),D=e.useCallback((function(){E.current=Date.now(),I(),R()}),[I,R]),F=e.useCallback((function(){C.current&&clearTimeout(C.current),C.current=setTimeout((function(){D()}),a)}),[D,a]);return e.useEffect((function(){var e=["mousemove","mousedown","keydown","touchstart","pointermove","wheel","scroll"];e.forEach((function(e){return window.addEventListener(e,F,{passive:!0})}));var n=function(){if("visible"===document.visibilityState){var e=Date.now();if(D(),null==d||d(!0),L.current){var n=e-L.current;null==f||f(n),L.current=null}}else L.current=Date.now(),null==d||d(!1),null==v||v()},o=function(){null==b||b()},t=function(){null==w||w()};return document.addEventListener("visibilitychange",n),window.addEventListener("focus",o),window.addEventListener("blur",t),R(),function(){e.forEach((function(e){return window.removeEventListener(e,F)})),document.removeEventListener("visibilitychange",n),window.removeEventListener("focus",o),window.removeEventListener("blur",t),y.current&&clearTimeout(y.current),C.current&&clearTimeout(C.current)}}),[F,D,R,d,v,f,b,w]),{isIdle:h}}exports.WatchmanBoundary=function(e){var t=e.timeout,i=void 0===t?3e4:t,r=e.sensitivity,u=void 0===r?1:r,c=e.debounce,l=void 0===c?250:c,s=e.onIdle,a=void 0===s?function(){return console.log("User went idle")}:s,d=e.onActive,v=void 0===d?function(){return console.log("User active again")}:d,f=e.onTabHide,b=void 0===f?function(){return console.log("Tab hidden")}:f,w=e.onTabShow,m=void 0===w?function(e){return console.log("Tab shown after ".concat(e," ms"))}:w,h=e.onVisibilityChange,g=void 0===h?function(e){return console.log("Tab visibility:",e)}:h,T=e.onFocus,y=void 0===T?function(){return console.log("Window focused")}:T,E=e.onBlur,C=void 0===E?function(){return console.log("Window blurred")}:E,L=e.renderIdle,k=e.children;return o({idleTime:i,sensitivity:u,debounce:l,onIdle:a,onActive:v,onTabHide:b,onTabShow:m,onVisibilityChange:g,onFocus:y,onBlur:C}).isIdle?L?n.jsx(n.Fragment,{children:L()}):n.jsx("div",{className:"idle-warning",children:"You’re idle. Auto logout soon."}):n.jsx(n.Fragment,{children:k})},exports.useReactWatchman=o;
//# sourceMappingURL=index.cjs.js.map