UNPKG

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.81 kB
import{useState as n,useRef as e,useCallback as o,useEffect as i}from"react";import{jsx as t,Fragment as r}from"react/jsx-runtime";function u(t){var r=void 0===t?{}:t,u=r.idleTime,c=void 0===u?3e4:u,l=r.onIdle,d=r.onActive,s=r.sensitivity,a=void 0===s?1:s,v=r.debounce,f=void 0===v?250:v,w=r.onVisibilityChange,m=r.onTabHide,b=r.onTabShow,h=r.onFocus,T=r.onBlur,g=n(!1),y=g[0],E=g[1],L=e(!1),I=e(null),p=e(Date.now()),D=e(null),A=e(null),S=c*a,B=o((function(){L.current||(L.current=!0,E(!0),null==l||l())}),[l]),C=o((function(){L.current&&(L.current=!1,E(!1),null==d||d())}),[d]),F=o((function(){I.current&&clearTimeout(I.current),I.current=setTimeout((function(){Date.now()-p.current>=S?B():F()}),S)}),[B,S]),H=o((function(){p.current=Date.now(),C(),F()}),[C,F]),V=o((function(){D.current&&clearTimeout(D.current),D.current=setTimeout((function(){H()}),f)}),[H,f]);return i((function(){var n=["mousemove","mousedown","keydown","touchstart","pointermove","wheel","scroll"];n.forEach((function(n){return window.addEventListener(n,V,{passive:!0})}));var e=function(){if("visible"===document.visibilityState){var n=Date.now();if(H(),null==w||w(!0),A.current){var e=n-A.current;null==b||b(e),A.current=null}}else A.current=Date.now(),null==w||w(!1),null==m||m()},o=function(){null==h||h()},i=function(){null==T||T()};return document.addEventListener("visibilitychange",e),window.addEventListener("focus",o),window.addEventListener("blur",i),F(),function(){n.forEach((function(n){return window.removeEventListener(n,V)})),document.removeEventListener("visibilitychange",e),window.removeEventListener("focus",o),window.removeEventListener("blur",i),I.current&&clearTimeout(I.current),D.current&&clearTimeout(D.current)}}),[V,H,F,w,m,b,h,T]),{isIdle:y}}var c=function(n){var e=n.timeout,o=void 0===e?3e4:e,i=n.sensitivity,c=void 0===i?1:i,l=n.debounce,d=void 0===l?250:l,s=n.onIdle,a=void 0===s?function(){return console.log("User went idle")}:s,v=n.onActive,f=void 0===v?function(){return console.log("User active again")}:v,w=n.onTabHide,m=void 0===w?function(){return console.log("Tab hidden")}:w,b=n.onTabShow,h=void 0===b?function(n){return console.log("Tab shown after ".concat(n," ms"))}:b,T=n.onVisibilityChange,g=void 0===T?function(n){return console.log("Tab visibility:",n)}:T,y=n.onFocus,E=void 0===y?function(){return console.log("Window focused")}:y,L=n.onBlur,I=void 0===L?function(){return console.log("Window blurred")}:L,p=n.renderIdle,D=n.children;return u({idleTime:o,sensitivity:c,debounce:d,onIdle:a,onActive:f,onTabHide:m,onTabShow:h,onVisibilityChange:g,onFocus:E,onBlur:I}).isIdle?p?t(r,{children:p()}):t("div",{className:"idle-warning",children:"You’re idle. Auto logout soon."}):t(r,{children:D})};export{c as WatchmanBoundary,u as useReactWatchman}; //# sourceMappingURL=index.esm.js.map