react-visibility-hooks 1.0.6 → 1.0.8

package/README.md

@@ -21,12 +21,6 @@ A collection of lightweight React hooks that help you build performance-consciou
 npm install react-visibility-hooks
 ```
 
-For `useSmartPolling`, you'll also need to install `@tanstack/react-query`:
-
-```bash
-npm install @tanstack/react-query
-```
-
 ## Hooks
 
 ### `useDocVisible`
@@ -104,7 +98,7 @@ function VideoPlayer() {
 
 ### `useSmartPolling`
 
-Smart polling that only refetches data when the page is visible. Built on top of [@tanstack/react-query](https://tanstack.com/query).
+Smart polling that only fetches data when the page is visible. Zero additional dependencies required.
 
 **Use cases:**
 - Real-time dashboards
@@ -126,7 +120,11 @@ function Dashboard() {
 }
 ```
 
-**Note:** This hook requires `@tanstack/react-query` to be installed. Polling is automatically paused when the tab is hidden and resumes when visible (default interval: 5 seconds).
+**Options:**
+- `interval` (optional): Polling interval in milliseconds (default: 5000)
+- `enabled` (optional): Enable/disable polling (default: true)
+
+Polling is automatically paused when the tab is hidden and resumes when visible.
 
 ## SSR Support
 

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var i in e)m(t,i,{get:e[i],enumerable:!0})},b=(t,e,i,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of d(e))!v.call(t,o)&&o!==i&&m(t,o,{get:()=>e[o],enumerable:!(r=f(e,o))||r.enumerable});return t};var p=t=>b(m({},"__esModule",{value:!0}),t);var V={};y(V,{useAutoPauseVideo:()=>E,useDocVisible:()=>n,useIdleVisibility:()=>w,useSmartPolling:()=>x});module.exports=p(V);var u=require("react");function n(){let[t,e]=(0,u.useState)(typeof document=="undefined"||document.visibilityState==="visible");return(0,u.useEffect)(()=>{if(typeof document=="undefined")return;let i=()=>e(document.visibilityState==="visible");return document.addEventListener("visibilitychange",i),()=>document.removeEventListener("visibilitychange",i)},[]),t}var l=require("react");function w(t=6e4){let e=n(),[i,r]=(0,l.useState)(!1);return(0,l.useEffect)(()=>{let o,s=()=>{r(!1),clearTimeout(o),o=setTimeout(()=>r(!0),t)};return window.addEventListener("mousemove",s),window.addEventListener("keydown",s),s(),()=>{window.removeEventListener("mousemove",s),window.removeEventListener("keydown",s),clearTimeout(o)}},[t]),{visible:e,idle:i}}var a=require("react");function E(t){let e=n();(0,a.useEffect)(()=>{let i=t.current;i&&(e?i.play().catch(()=>{}):i.pause())},[e,t])}var c;try{c=require("@tanstack/react-query").useQuery}catch{c=null}function x(t){let e=n();return c?c({queryKey:["smartPolling"],queryFn:t,refetchInterval:e?5e3:!1}):(console.warn("Install @tanstack/react-query to use useSmartPolling hook"),null)}0&&(module.exports={useAutoPauseVideo,useDocVisible,useIdleVisibility,useSmartPolling});
+"use strict";var m=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var x=(t,e)=>{for(var r in e)m(t,r,{get:e[r],enumerable:!0})},R=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of T(e))!L.call(t,n)&&n!==r&&m(t,n,{get:()=>e[n],enumerable:!(o=S(e,n))||o.enumerable});return t};var V=t=>R(m({},"__esModule",{value:!0}),t);var D={};x(D,{useAutoPauseVideo:()=>I,useDocVisible:()=>u,useIdleVisibility:()=>h,useSmartPolling:()=>P});module.exports=V(D);var l=require("react");function u(){let[t,e]=(0,l.useState)(typeof document=="undefined"||document.visibilityState==="visible");return(0,l.useEffect)(()=>{if(typeof document=="undefined")return;let r=()=>e(document.visibilityState==="visible");return document.addEventListener("visibilitychange",r),()=>document.removeEventListener("visibilitychange",r)},[]),t}var d=require("react");function h(t=6e4){let e=u(),[r,o]=(0,d.useState)(!1);return(0,d.useEffect)(()=>{let n,s=()=>{o(!1),clearTimeout(n),n=setTimeout(()=>o(!0),t)};return window.addEventListener("mousemove",s),window.addEventListener("keydown",s),s(),()=>{window.removeEventListener("mousemove",s),window.removeEventListener("keydown",s),clearTimeout(n)}},[t]),{visible:e,idle:r}}var y=require("react");function I(t){let e=u();(0,y.useEffect)(()=>{let r=t.current;r&&(e?r.play().catch(()=>{}):r.pause())},[e,t])}var i=require("react");function P(t,e){let{interval:r=5e3,enabled:o=!0}=e!=null?e:{},n=u(),[s,w]=(0,i.useState)(void 0),[g,v]=(0,i.useState)(!0),[b,p]=(0,i.useState)(void 0),E=(0,i.useRef)(t),f=(0,i.useRef)(void 0);E.current=t;let a=(0,i.useCallback)(async()=>{try{let c=await E.current();w(c),p(void 0)}catch(c){p(c instanceof Error?c:new Error(String(c)))}finally{v(!1)}},[]);return(0,i.useEffect)(()=>{o&&(v(!0),a())},[o,a]),(0,i.useEffect)(()=>{if(!o||!n){clearInterval(f.current);return}return f.current=setInterval(a,r),()=>clearInterval(f.current)},[n,o,r,a]),{data:s,isLoading:g,isError:!!b,error:b,refetch:a}}0&&(module.exports={useAutoPauseVideo,useDocVisible,useIdleVisibility,useSmartPolling});
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/useDocVisible.ts","../src/useIdleVisibility.ts","../src/useAutoPauseVideo.ts","../src/useSmartPolling.ts"],"sourcesContent":["export * from \"./useDocVisible\";\nexport * from \"./useIdleVisibility\";\nexport * from \"./useAutoPauseVideo\";\nexport * from \"./useSmartPolling\";\n","import { useEffect, useState } from \"react\";\n\nexport function useDocVisible(): boolean {\n  const [visible, setVisible] = useState(\n    typeof document === \"undefined\" || document.visibilityState === \"visible\"\n  );\n\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    const handler = () => setVisible(document.visibilityState === \"visible\");\n    document.addEventListener(\"visibilitychange\", handler);\n    return () => document.removeEventListener(\"visibilitychange\", handler);\n  }, []);\n\n  return visible;\n}\n","import { useEffect, useState } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useIdleVisibility(timeout = 60000) {\n  const visible = useDocVisible();\n  const [idle, setIdle] = useState(false);\n\n  useEffect(() => {\n    let timer: any;\n\n    const reset = () => {\n      setIdle(false);\n      clearTimeout(timer);\n      timer = setTimeout(() => setIdle(true), timeout);\n    };\n\n    window.addEventListener(\"mousemove\", reset);\n    window.addEventListener(\"keydown\", reset);\n    reset();\n\n    return () => {\n      window.removeEventListener(\"mousemove\", reset);\n      window.removeEventListener(\"keydown\", reset);\n      clearTimeout(timer);\n    };\n  }, [timeout]);\n\n  return { visible, idle };\n}\n","import { useEffect } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>) {\n  const visible = useDocVisible();\n\n  useEffect(() => {\n    const video = ref.current;\n    if (!video) return;\n\n    if (!visible) video.pause();\n    else video.play().catch(() => {});\n  }, [visible, ref]);\n}\n","import { useDocVisible } from \"./useDocVisible\";\n\nlet useQuery: any;\n\ntry {\n  useQuery = require(\"@tanstack/react-query\").useQuery;\n} catch {\n  useQuery = null;\n}\n\nexport function useSmartPolling(fetchFn: () => Promise<any>) {\n  const visible = useDocVisible();\n\n  if (!useQuery) {\n    console.warn(\n      \"Install @tanstack/react-query to use useSmartPolling hook\"\n    );\n    return null;\n  }\n\n  return useQuery({\n    queryKey: [\"smartPolling\"],\n    queryFn: fetchFn,\n    refetchInterval: visible ? 5000 : false,\n  });\n}\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,EAAA,kBAAAC,EAAA,sBAAAC,EAAA,oBAAAC,IAAA,eAAAC,EAAAN,GCAA,IAAAO,EAAoC,iBAE7B,SAASC,GAAyB,CACvC,GAAM,CAACC,EAASC,CAAU,KAAI,YAC5B,OAAO,UAAa,aAAe,SAAS,kBAAoB,SAClE,EAEA,sBAAU,IAAM,CACd,GAAI,OAAO,UAAa,YAAa,OACrC,IAAMC,EAAU,IAAMD,EAAW,SAAS,kBAAoB,SAAS,EACvE,gBAAS,iBAAiB,mBAAoBC,CAAO,EAC9C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAO,CACvE,EAAG,CAAC,CAAC,EAEEF,CACT,CCfA,IAAAG,EAAoC,iBAG7B,SAASC,EAAkBC,EAAU,IAAO,CACjD,IAAMC,EAAUC,EAAc,EACxB,CAACC,EAAMC,CAAO,KAAI,YAAS,EAAK,EAEtC,sBAAU,IAAM,CACd,IAAIC,EAEEC,EAAQ,IAAM,CAClBF,EAAQ,EAAK,EACb,aAAaC,CAAK,EAClBA,EAAQ,WAAW,IAAMD,EAAQ,EAAI,EAAGJ,CAAO,CACjD,EAEA,cAAO,iBAAiB,YAAaM,CAAK,EAC1C,OAAO,iBAAiB,UAAWA,CAAK,EACxCA,EAAM,EAEC,IAAM,CACX,OAAO,oBAAoB,YAAaA,CAAK,EAC7C,OAAO,oBAAoB,UAAWA,CAAK,EAC3C,aAAaD,CAAK,CACpB,CACF,EAAG,CAACL,CAAO,CAAC,EAEL,CAAE,QAAAC,EAAS,KAAAE,CAAK,CACzB,CC5BA,IAAAI,EAA0B,iBAGnB,SAASC,EAAkBC,EAAwC,CACxE,IAAMC,EAAUC,EAAc,KAE9B,aAAU,IAAM,CACd,IAAMC,EAAQH,EAAI,QACbG,IAEAF,EACAE,EAAM,KAAK,EAAE,MAAM,IAAM,CAAC,CAAC,EADlBA,EAAM,MAAM,EAE5B,EAAG,CAACF,EAASD,CAAG,CAAC,CACnB,CCXA,IAAII,EAEJ,GAAI,CACFA,EAAW,QAAQ,uBAAuB,EAAE,QAC9C,MAAQ,CACNA,EAAW,IACb,CAEO,SAASC,EAAgBC,EAA6B,CAC3D,IAAMC,EAAUC,EAAc,EAE9B,OAAKJ,EAOEA,EAAS,CACd,SAAU,CAAC,cAAc,EACzB,QAASE,EACT,gBAAiBC,EAAU,IAAO,EACpC,CAAC,GAVC,QAAQ,KACN,2DACF,EACO,KAQX","names":["index_exports","__export","useAutoPauseVideo","useDocVisible","useIdleVisibility","useSmartPolling","__toCommonJS","import_react","useDocVisible","visible","setVisible","handler","import_react","useIdleVisibility","timeout","visible","useDocVisible","idle","setIdle","timer","reset","import_react","useAutoPauseVideo","ref","visible","useDocVisible","video","useQuery","useSmartPolling","fetchFn","visible","useDocVisible"]}
+{"version":3,"sources":["../src/index.ts","../src/useDocVisible.ts","../src/useIdleVisibility.ts","../src/useAutoPauseVideo.ts","../src/useSmartPolling.ts"],"sourcesContent":["export * from \"./useDocVisible\";\nexport * from \"./useIdleVisibility\";\nexport * from \"./useAutoPauseVideo\";\nexport * from \"./useSmartPolling\";\n","import { useEffect, useState } from \"react\";\n\nexport function useDocVisible(): boolean {\n  const [visible, setVisible] = useState(\n    typeof document === \"undefined\" || document.visibilityState === \"visible\"\n  );\n\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    const handler = () => setVisible(document.visibilityState === \"visible\");\n    document.addEventListener(\"visibilitychange\", handler);\n    return () => document.removeEventListener(\"visibilitychange\", handler);\n  }, []);\n\n  return visible;\n}\n","import { useEffect, useState } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useIdleVisibility(timeout = 60000) {\n  const visible = useDocVisible();\n  const [idle, setIdle] = useState(false);\n\n  useEffect(() => {\n    let timer: any;\n\n    const reset = () => {\n      setIdle(false);\n      clearTimeout(timer);\n      timer = setTimeout(() => setIdle(true), timeout);\n    };\n\n    window.addEventListener(\"mousemove\", reset);\n    window.addEventListener(\"keydown\", reset);\n    reset();\n\n    return () => {\n      window.removeEventListener(\"mousemove\", reset);\n      window.removeEventListener(\"keydown\", reset);\n      clearTimeout(timer);\n    };\n  }, [timeout]);\n\n  return { visible, idle };\n}\n","import { useEffect } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>) {\n  const visible = useDocVisible();\n\n  useEffect(() => {\n    const video = ref.current;\n    if (!video) return;\n\n    if (!visible) video.pause();\n    else video.play().catch(() => {});\n  }, [visible, ref]);\n}\n","import { useState, useEffect, useRef, useCallback } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\ninterface SmartPollingOptions {\n  interval?: number;\n  enabled?: boolean;\n}\n\ninterface SmartPollingResult<T> {\n  data: T | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  error: Error | undefined;\n  refetch: () => void;\n}\n\nexport function useSmartPolling<T = any>(\n  fetchFn: () => Promise<T>,\n  options?: SmartPollingOptions,\n): SmartPollingResult<T> {\n  const { interval = 5000, enabled = true } = options ?? {};\n  const visible = useDocVisible();\n  const [data, setData] = useState<T | undefined>(undefined);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | undefined>(undefined);\n  const fetchRef = useRef(fetchFn);\n  const timerRef = useRef<ReturnType<typeof setInterval> | undefined>(\n    undefined,\n  );\n\n  fetchRef.current = fetchFn;\n\n  const execute = useCallback(async () => {\n    try {\n      const result = await fetchRef.current();\n      setData(result);\n      setError(undefined);\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error(String(err)));\n    } finally {\n      setIsLoading(false);\n    }\n  }, []);\n\n  // Initial fetch\n  useEffect(() => {\n    if (!enabled) return;\n    setIsLoading(true);\n    execute();\n  }, [enabled, execute]);\n\n  // Polling — only when visible and enabled\n  useEffect(() => {\n    if (!enabled || !visible) {\n      clearInterval(timerRef.current);\n      return;\n    }\n\n    timerRef.current = setInterval(execute, interval);\n    return () => clearInterval(timerRef.current);\n  }, [visible, enabled, interval, execute]);\n\n  return { data, isLoading, isError: !!error, error, refetch: execute };\n}\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,EAAA,kBAAAC,EAAA,sBAAAC,EAAA,oBAAAC,IAAA,eAAAC,EAAAN,GCAA,IAAAO,EAAoC,iBAE7B,SAASC,GAAyB,CACvC,GAAM,CAACC,EAASC,CAAU,KAAI,YAC5B,OAAO,UAAa,aAAe,SAAS,kBAAoB,SAClE,EAEA,sBAAU,IAAM,CACd,GAAI,OAAO,UAAa,YAAa,OACrC,IAAMC,EAAU,IAAMD,EAAW,SAAS,kBAAoB,SAAS,EACvE,gBAAS,iBAAiB,mBAAoBC,CAAO,EAC9C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAO,CACvE,EAAG,CAAC,CAAC,EAEEF,CACT,CCfA,IAAAG,EAAoC,iBAG7B,SAASC,EAAkBC,EAAU,IAAO,CACjD,IAAMC,EAAUC,EAAc,EACxB,CAACC,EAAMC,CAAO,KAAI,YAAS,EAAK,EAEtC,sBAAU,IAAM,CACd,IAAIC,EAEEC,EAAQ,IAAM,CAClBF,EAAQ,EAAK,EACb,aAAaC,CAAK,EAClBA,EAAQ,WAAW,IAAMD,EAAQ,EAAI,EAAGJ,CAAO,CACjD,EAEA,cAAO,iBAAiB,YAAaM,CAAK,EAC1C,OAAO,iBAAiB,UAAWA,CAAK,EACxCA,EAAM,EAEC,IAAM,CACX,OAAO,oBAAoB,YAAaA,CAAK,EAC7C,OAAO,oBAAoB,UAAWA,CAAK,EAC3C,aAAaD,CAAK,CACpB,CACF,EAAG,CAACL,CAAO,CAAC,EAEL,CAAE,QAAAC,EAAS,KAAAE,CAAK,CACzB,CC5BA,IAAAI,EAA0B,iBAGnB,SAASC,EAAkBC,EAAwC,CACxE,IAAMC,EAAUC,EAAc,KAE9B,aAAU,IAAM,CACd,IAAMC,EAAQH,EAAI,QACbG,IAEAF,EACAE,EAAM,KAAK,EAAE,MAAM,IAAM,CAAC,CAAC,EADlBA,EAAM,MAAM,EAE5B,EAAG,CAACF,EAASD,CAAG,CAAC,CACnB,CCbA,IAAAI,EAAyD,iBAgBlD,SAASC,EACdC,EACAC,EACuB,CACvB,GAAM,CAAE,SAAAC,EAAW,IAAM,QAAAC,EAAU,EAAK,EAAIF,GAAA,KAAAA,EAAW,CAAC,EAClDG,EAAUC,EAAc,EACxB,CAACC,EAAMC,CAAO,KAAI,YAAwB,MAAS,EACnD,CAACC,EAAWC,CAAY,KAAI,YAAS,EAAI,EACzC,CAACC,EAAOC,CAAQ,KAAI,YAA4B,MAAS,EACzDC,KAAW,UAAOZ,CAAO,EACzBa,KAAW,UACf,MACF,EAEAD,EAAS,QAAUZ,EAEnB,IAAMc,KAAU,eAAY,SAAY,CACtC,GAAI,CACF,IAAMC,EAAS,MAAMH,EAAS,QAAQ,EACtCL,EAAQQ,CAAM,EACdJ,EAAS,MAAS,CACpB,OAASK,EAAK,CACZL,EAASK,aAAe,MAAQA,EAAM,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,CAC9D,QAAE,CACAP,EAAa,EAAK,CACpB,CACF,EAAG,CAAC,CAAC,EAGL,sBAAU,IAAM,CACTN,IACLM,EAAa,EAAI,EACjBK,EAAQ,EACV,EAAG,CAACX,EAASW,CAAO,CAAC,KAGrB,aAAU,IAAM,CACd,GAAI,CAACX,GAAW,CAACC,EAAS,CACxB,cAAcS,EAAS,OAAO,EAC9B,MACF,CAEA,OAAAA,EAAS,QAAU,YAAYC,EAASZ,CAAQ,EACzC,IAAM,cAAcW,EAAS,OAAO,CAC7C,EAAG,CAACT,EAASD,EAASD,EAAUY,CAAO,CAAC,EAEjC,CAAE,KAAAR,EAAM,UAAAE,EAAW,QAAS,CAAC,CAACE,EAAO,MAAAA,EAAO,QAASI,CAAQ,CACtE","names":["index_exports","__export","useAutoPauseVideo","useDocVisible","useIdleVisibility","useSmartPolling","__toCommonJS","import_react","useDocVisible","visible","setVisible","handler","import_react","useIdleVisibility","timeout","visible","useDocVisible","idle","setIdle","timer","reset","import_react","useAutoPauseVideo","ref","visible","useDocVisible","video","import_react","useSmartPolling","fetchFn","options","interval","enabled","visible","useDocVisible","data","setData","isLoading","setIsLoading","error","setError","fetchRef","timerRef","execute","result","err"]}

package/dist/index.d.cts

@@ -7,6 +7,17 @@ declare function useIdleVisibility(timeout?: number): {
 
 declare function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>): void;
 
-declare function useSmartPolling(fetchFn: () => Promise<any>): any;
+interface SmartPollingOptions {
+    interval?: number;
+    enabled?: boolean;
+}
+interface SmartPollingResult<T> {
+    data: T | undefined;
+    isLoading: boolean;
+    isError: boolean;
+    error: Error | undefined;
+    refetch: () => void;
+}
+declare function useSmartPolling<T = any>(fetchFn: () => Promise<T>, options?: SmartPollingOptions): SmartPollingResult<T>;
 
 export { useAutoPauseVideo, useDocVisible, useIdleVisibility, useSmartPolling };

package/dist/index.d.ts

@@ -7,6 +7,17 @@ declare function useIdleVisibility(timeout?: number): {
 
 declare function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>): void;
 
-declare function useSmartPolling(fetchFn: () => Promise<any>): any;
+interface SmartPollingOptions {
+    interval?: number;
+    enabled?: boolean;
+}
+interface SmartPollingResult<T> {
+    data: T | undefined;
+    isLoading: boolean;
+    isError: boolean;
+    error: Error | undefined;
+    refetch: () => void;
+}
+declare function useSmartPolling<T = any>(fetchFn: () => Promise<T>, options?: SmartPollingOptions): SmartPollingResult<T>;
 
 export { useAutoPauseVideo, useDocVisible, useIdleVisibility, useSmartPolling };

package/dist/index.js

@@ -1,2 +1,2 @@
-var l=(e=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(e,{get:(t,i)=>(typeof require!="undefined"?require:t)[i]}):e)(function(e){if(typeof require!="undefined")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});import{useEffect as c,useState as m}from"react";function o(){let[e,t]=m(typeof document=="undefined"||document.visibilityState==="visible");return c(()=>{if(typeof document=="undefined")return;let i=()=>t(document.visibilityState==="visible");return document.addEventListener("visibilitychange",i),()=>document.removeEventListener("visibilitychange",i)},[]),e}import{useEffect as a,useState as f}from"react";function E(e=6e4){let t=o(),[i,u]=f(!1);return a(()=>{let s,n=()=>{u(!1),clearTimeout(s),s=setTimeout(()=>u(!0),e)};return window.addEventListener("mousemove",n),window.addEventListener("keydown",n),n(),()=>{window.removeEventListener("mousemove",n),window.removeEventListener("keydown",n),clearTimeout(s)}},[e]),{visible:t,idle:i}}import{useEffect as d}from"react";function L(e){let t=o();d(()=>{let i=e.current;i&&(t?i.play().catch(()=>{}):i.pause())},[t,e])}var r;try{r=l("@tanstack/react-query").useQuery}catch{r=null}function P(e){let t=o();return r?r({queryKey:["smartPolling"],queryFn:e,refetchInterval:t?5e3:!1}):(console.warn("Install @tanstack/react-query to use useSmartPolling hook"),null)}export{L as useAutoPauseVideo,o as useDocVisible,E as useIdleVisibility,P as useSmartPolling};
+import{useEffect as w,useState as g}from"react";function s(){let[t,r]=g(typeof document=="undefined"||document.visibilityState==="visible");return w(()=>{if(typeof document=="undefined")return;let e=()=>r(document.visibilityState==="visible");return document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[]),t}import{useEffect as S,useState as T}from"react";function P(t=6e4){let r=s(),[e,n]=T(!1);return S(()=>{let o,i=()=>{n(!1),clearTimeout(o),o=setTimeout(()=>n(!0),t)};return window.addEventListener("mousemove",i),window.addEventListener("keydown",i),i(),()=>{window.removeEventListener("mousemove",i),window.removeEventListener("keydown",i),clearTimeout(o)}},[t]),{visible:r,idle:e}}import{useEffect as L}from"react";function j(t){let r=s();L(()=>{let e=t.current;e&&(r?e.play().catch(()=>{}):e.pause())},[r,t])}import{useState as l,useEffect as b,useRef as p,useCallback as x}from"react";function M(t,r){let{interval:e=5e3,enabled:n=!0}=r!=null?r:{},o=s(),[i,E]=l(void 0),[y,d]=l(!0),[f,m]=l(void 0),v=p(t),c=p(void 0);v.current=t;let u=x(async()=>{try{let a=await v.current();E(a),m(void 0)}catch(a){m(a instanceof Error?a:new Error(String(a)))}finally{d(!1)}},[]);return b(()=>{n&&(d(!0),u())},[n,u]),b(()=>{if(!n||!o){clearInterval(c.current);return}return c.current=setInterval(u,e),()=>clearInterval(c.current)},[o,n,e,u]),{data:i,isLoading:y,isError:!!f,error:f,refetch:u}}export{j as useAutoPauseVideo,s as useDocVisible,P as useIdleVisibility,M as useSmartPolling};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useDocVisible.ts","../src/useIdleVisibility.ts","../src/useAutoPauseVideo.ts","../src/useSmartPolling.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport function useDocVisible(): boolean {\n  const [visible, setVisible] = useState(\n    typeof document === \"undefined\" || document.visibilityState === \"visible\"\n  );\n\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    const handler = () => setVisible(document.visibilityState === \"visible\");\n    document.addEventListener(\"visibilitychange\", handler);\n    return () => document.removeEventListener(\"visibilitychange\", handler);\n  }, []);\n\n  return visible;\n}\n","import { useEffect, useState } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useIdleVisibility(timeout = 60000) {\n  const visible = useDocVisible();\n  const [idle, setIdle] = useState(false);\n\n  useEffect(() => {\n    let timer: any;\n\n    const reset = () => {\n      setIdle(false);\n      clearTimeout(timer);\n      timer = setTimeout(() => setIdle(true), timeout);\n    };\n\n    window.addEventListener(\"mousemove\", reset);\n    window.addEventListener(\"keydown\", reset);\n    reset();\n\n    return () => {\n      window.removeEventListener(\"mousemove\", reset);\n      window.removeEventListener(\"keydown\", reset);\n      clearTimeout(timer);\n    };\n  }, [timeout]);\n\n  return { visible, idle };\n}\n","import { useEffect } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>) {\n  const visible = useDocVisible();\n\n  useEffect(() => {\n    const video = ref.current;\n    if (!video) return;\n\n    if (!visible) video.pause();\n    else video.play().catch(() => {});\n  }, [visible, ref]);\n}\n","import { useDocVisible } from \"./useDocVisible\";\n\nlet useQuery: any;\n\ntry {\n  useQuery = require(\"@tanstack/react-query\").useQuery;\n} catch {\n  useQuery = null;\n}\n\nexport function useSmartPolling(fetchFn: () => Promise<any>) {\n  const visible = useDocVisible();\n\n  if (!useQuery) {\n    console.warn(\n      \"Install @tanstack/react-query to use useSmartPolling hook\"\n    );\n    return null;\n  }\n\n  return useQuery({\n    queryKey: [\"smartPolling\"],\n    queryFn: fetchFn,\n    refetchInterval: visible ? 5000 : false,\n  });\n}\n"],"mappings":"6RAAA,OAAS,aAAAA,EAAW,YAAAC,MAAgB,QAE7B,SAASC,GAAyB,CACvC,GAAM,CAACC,EAASC,CAAU,EAAIH,EAC5B,OAAO,UAAa,aAAe,SAAS,kBAAoB,SAClE,EAEA,OAAAD,EAAU,IAAM,CACd,GAAI,OAAO,UAAa,YAAa,OACrC,IAAMK,EAAU,IAAMD,EAAW,SAAS,kBAAoB,SAAS,EACvE,gBAAS,iBAAiB,mBAAoBC,CAAO,EAC9C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAO,CACvE,EAAG,CAAC,CAAC,EAEEF,CACT,CCfA,OAAS,aAAAG,EAAW,YAAAC,MAAgB,QAG7B,SAASC,EAAkBC,EAAU,IAAO,CACjD,IAAMC,EAAUC,EAAc,EACxB,CAACC,EAAMC,CAAO,EAAIC,EAAS,EAAK,EAEtC,OAAAC,EAAU,IAAM,CACd,IAAIC,EAEEC,EAAQ,IAAM,CAClBJ,EAAQ,EAAK,EACb,aAAaG,CAAK,EAClBA,EAAQ,WAAW,IAAMH,EAAQ,EAAI,EAAGJ,CAAO,CACjD,EAEA,cAAO,iBAAiB,YAAaQ,CAAK,EAC1C,OAAO,iBAAiB,UAAWA,CAAK,EACxCA,EAAM,EAEC,IAAM,CACX,OAAO,oBAAoB,YAAaA,CAAK,EAC7C,OAAO,oBAAoB,UAAWA,CAAK,EAC3C,aAAaD,CAAK,CACpB,CACF,EAAG,CAACP,CAAO,CAAC,EAEL,CAAE,QAAAC,EAAS,KAAAE,CAAK,CACzB,CC5BA,OAAS,aAAAM,MAAiB,QAGnB,SAASC,EAAkBC,EAAwC,CACxE,IAAMC,EAAUC,EAAc,EAE9BC,EAAU,IAAM,CACd,IAAMC,EAAQJ,EAAI,QACbI,IAEAH,EACAG,EAAM,KAAK,EAAE,MAAM,IAAM,CAAC,CAAC,EADlBA,EAAM,MAAM,EAE5B,EAAG,CAACH,EAASD,CAAG,CAAC,CACnB,CCXA,IAAIK,EAEJ,GAAI,CACFA,EAAW,EAAQ,uBAAuB,EAAE,QAC9C,MAAQ,CACNA,EAAW,IACb,CAEO,SAASC,EAAgBC,EAA6B,CAC3D,IAAMC,EAAUC,EAAc,EAE9B,OAAKJ,EAOEA,EAAS,CACd,SAAU,CAAC,cAAc,EACzB,QAASE,EACT,gBAAiBC,EAAU,IAAO,EACpC,CAAC,GAVC,QAAQ,KACN,2DACF,EACO,KAQX","names":["useEffect","useState","useDocVisible","visible","setVisible","handler","useEffect","useState","useIdleVisibility","timeout","visible","useDocVisible","idle","setIdle","useState","useEffect","timer","reset","useEffect","useAutoPauseVideo","ref","visible","useDocVisible","useEffect","video","useQuery","useSmartPolling","fetchFn","visible","useDocVisible"]}
+{"version":3,"sources":["../src/useDocVisible.ts","../src/useIdleVisibility.ts","../src/useAutoPauseVideo.ts","../src/useSmartPolling.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport function useDocVisible(): boolean {\n  const [visible, setVisible] = useState(\n    typeof document === \"undefined\" || document.visibilityState === \"visible\"\n  );\n\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    const handler = () => setVisible(document.visibilityState === \"visible\");\n    document.addEventListener(\"visibilitychange\", handler);\n    return () => document.removeEventListener(\"visibilitychange\", handler);\n  }, []);\n\n  return visible;\n}\n","import { useEffect, useState } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useIdleVisibility(timeout = 60000) {\n  const visible = useDocVisible();\n  const [idle, setIdle] = useState(false);\n\n  useEffect(() => {\n    let timer: any;\n\n    const reset = () => {\n      setIdle(false);\n      clearTimeout(timer);\n      timer = setTimeout(() => setIdle(true), timeout);\n    };\n\n    window.addEventListener(\"mousemove\", reset);\n    window.addEventListener(\"keydown\", reset);\n    reset();\n\n    return () => {\n      window.removeEventListener(\"mousemove\", reset);\n      window.removeEventListener(\"keydown\", reset);\n      clearTimeout(timer);\n    };\n  }, [timeout]);\n\n  return { visible, idle };\n}\n","import { useEffect } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>) {\n  const visible = useDocVisible();\n\n  useEffect(() => {\n    const video = ref.current;\n    if (!video) return;\n\n    if (!visible) video.pause();\n    else video.play().catch(() => {});\n  }, [visible, ref]);\n}\n","import { useState, useEffect, useRef, useCallback } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\ninterface SmartPollingOptions {\n  interval?: number;\n  enabled?: boolean;\n}\n\ninterface SmartPollingResult<T> {\n  data: T | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  error: Error | undefined;\n  refetch: () => void;\n}\n\nexport function useSmartPolling<T = any>(\n  fetchFn: () => Promise<T>,\n  options?: SmartPollingOptions,\n): SmartPollingResult<T> {\n  const { interval = 5000, enabled = true } = options ?? {};\n  const visible = useDocVisible();\n  const [data, setData] = useState<T | undefined>(undefined);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | undefined>(undefined);\n  const fetchRef = useRef(fetchFn);\n  const timerRef = useRef<ReturnType<typeof setInterval> | undefined>(\n    undefined,\n  );\n\n  fetchRef.current = fetchFn;\n\n  const execute = useCallback(async () => {\n    try {\n      const result = await fetchRef.current();\n      setData(result);\n      setError(undefined);\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error(String(err)));\n    } finally {\n      setIsLoading(false);\n    }\n  }, []);\n\n  // Initial fetch\n  useEffect(() => {\n    if (!enabled) return;\n    setIsLoading(true);\n    execute();\n  }, [enabled, execute]);\n\n  // Polling — only when visible and enabled\n  useEffect(() => {\n    if (!enabled || !visible) {\n      clearInterval(timerRef.current);\n      return;\n    }\n\n    timerRef.current = setInterval(execute, interval);\n    return () => clearInterval(timerRef.current);\n  }, [visible, enabled, interval, execute]);\n\n  return { data, isLoading, isError: !!error, error, refetch: execute };\n}\n"],"mappings":"AAAA,OAAS,aAAAA,EAAW,YAAAC,MAAgB,QAE7B,SAASC,GAAyB,CACvC,GAAM,CAACC,EAASC,CAAU,EAAIH,EAC5B,OAAO,UAAa,aAAe,SAAS,kBAAoB,SAClE,EAEA,OAAAD,EAAU,IAAM,CACd,GAAI,OAAO,UAAa,YAAa,OACrC,IAAMK,EAAU,IAAMD,EAAW,SAAS,kBAAoB,SAAS,EACvE,gBAAS,iBAAiB,mBAAoBC,CAAO,EAC9C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAO,CACvE,EAAG,CAAC,CAAC,EAEEF,CACT,CCfA,OAAS,aAAAG,EAAW,YAAAC,MAAgB,QAG7B,SAASC,EAAkBC,EAAU,IAAO,CACjD,IAAMC,EAAUC,EAAc,EACxB,CAACC,EAAMC,CAAO,EAAIC,EAAS,EAAK,EAEtC,OAAAC,EAAU,IAAM,CACd,IAAIC,EAEEC,EAAQ,IAAM,CAClBJ,EAAQ,EAAK,EACb,aAAaG,CAAK,EAClBA,EAAQ,WAAW,IAAMH,EAAQ,EAAI,EAAGJ,CAAO,CACjD,EAEA,cAAO,iBAAiB,YAAaQ,CAAK,EAC1C,OAAO,iBAAiB,UAAWA,CAAK,EACxCA,EAAM,EAEC,IAAM,CACX,OAAO,oBAAoB,YAAaA,CAAK,EAC7C,OAAO,oBAAoB,UAAWA,CAAK,EAC3C,aAAaD,CAAK,CACpB,CACF,EAAG,CAACP,CAAO,CAAC,EAEL,CAAE,QAAAC,EAAS,KAAAE,CAAK,CACzB,CC5BA,OAAS,aAAAM,MAAiB,QAGnB,SAASC,EAAkBC,EAAwC,CACxE,IAAMC,EAAUC,EAAc,EAE9BC,EAAU,IAAM,CACd,IAAMC,EAAQJ,EAAI,QACbI,IAEAH,EACAG,EAAM,KAAK,EAAE,MAAM,IAAM,CAAC,CAAC,EADlBA,EAAM,MAAM,EAE5B,EAAG,CAACH,EAASD,CAAG,CAAC,CACnB,CCbA,OAAS,YAAAK,EAAU,aAAAC,EAAW,UAAAC,EAAQ,eAAAC,MAAmB,QAgBlD,SAASC,EACdC,EACAC,EACuB,CACvB,GAAM,CAAE,SAAAC,EAAW,IAAM,QAAAC,EAAU,EAAK,EAAIF,GAAA,KAAAA,EAAW,CAAC,EAClDG,EAAUC,EAAc,EACxB,CAACC,EAAMC,CAAO,EAAIC,EAAwB,MAAS,EACnD,CAACC,EAAWC,CAAY,EAAIF,EAAS,EAAI,EACzC,CAACG,EAAOC,CAAQ,EAAIJ,EAA4B,MAAS,EACzDK,EAAWC,EAAOd,CAAO,EACzBe,EAAWD,EACf,MACF,EAEAD,EAAS,QAAUb,EAEnB,IAAMgB,EAAUC,EAAY,SAAY,CACtC,GAAI,CACF,IAAMC,EAAS,MAAML,EAAS,QAAQ,EACtCN,EAAQW,CAAM,EACdN,EAAS,MAAS,CACpB,OAASO,EAAK,CACZP,EAASO,aAAe,MAAQA,EAAM,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,CAC9D,QAAE,CACAT,EAAa,EAAK,CACpB,CACF,EAAG,CAAC,CAAC,EAGL,OAAAU,EAAU,IAAM,CACTjB,IACLO,EAAa,EAAI,EACjBM,EAAQ,EACV,EAAG,CAACb,EAASa,CAAO,CAAC,EAGrBI,EAAU,IAAM,CACd,GAAI,CAACjB,GAAW,CAACC,EAAS,CACxB,cAAcW,EAAS,OAAO,EAC9B,MACF,CAEA,OAAAA,EAAS,QAAU,YAAYC,EAASd,CAAQ,EACzC,IAAM,cAAca,EAAS,OAAO,CAC7C,EAAG,CAACX,EAASD,EAASD,EAAUc,CAAO,CAAC,EAEjC,CAAE,KAAAV,EAAM,UAAAG,EAAW,QAAS,CAAC,CAACE,EAAO,MAAAA,EAAO,QAASK,CAAQ,CACtE","names":["useEffect","useState","useDocVisible","visible","setVisible","handler","useEffect","useState","useIdleVisibility","timeout","visible","useDocVisible","idle","setIdle","useState","useEffect","timer","reset","useEffect","useAutoPauseVideo","ref","visible","useDocVisible","useEffect","video","useState","useEffect","useRef","useCallback","useSmartPolling","fetchFn","options","interval","enabled","visible","useDocVisible","data","setData","useState","isLoading","setIsLoading","error","setError","fetchRef","useRef","timerRef","execute","useCallback","result","err","useEffect"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-visibility-hooks",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Tiny, SSR-safe React hooks for page visibility, idle detection and smart polling",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -45,14 +45,8 @@
     "url": "https://github.com/exewhyz/react-visibility-hooks/issues"
   },
   "peerDependencies": {
-    "@tanstack/react-query": ">=4",
     "react": ">=18"
   },
-  "peerDependenciesMeta": {
-    "@tanstack/react-query": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",