react-visibility-hooks 1.0.0 → 1.0.2

package/package.json

@@ -1,10 +1,17 @@
 {
   "name": "react-visibility-hooks",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Tiny React hooks for visibility, idle detection, and smart polling",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "sideEffects": false,
   "scripts": {
     "build": "tsup",
@@ -20,7 +27,7 @@
   ],
   "author": "Aniket Raj",
   "license": "MIT",
-  "type": "module",
+  "type": "commonjs",
   "peerDependencies": {
     "react": ">=18",
     "@tanstack/react-query": ">=4"

package/dist/index.cjs

@@ -1,2 +0,0 @@
-"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});
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"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"]}

package/dist/index.d.cts

@@ -1,12 +0,0 @@
-declare function useDocVisible(): boolean;
-
-declare function useIdleVisibility(timeout?: number): {
-    visible: boolean;
-    idle: boolean;
-};
-
-declare function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>): void;
-
-declare function useSmartPolling(fetchFn: () => Promise<any>): any;
-
-export { useAutoPauseVideo, useDocVisible, useIdleVisibility, useSmartPolling };

package/dist/index.d.ts

@@ -1,12 +0,0 @@
-declare function useDocVisible(): boolean;
-
-declare function useIdleVisibility(timeout?: number): {
-    visible: boolean;
-    idle: boolean;
-};
-
-declare function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>): void;
-
-declare function useSmartPolling(fetchFn: () => Promise<any>): any;
-
-export { useAutoPauseVideo, useDocVisible, useIdleVisibility, useSmartPolling };

package/dist/index.js

@@ -1,2 +0,0 @@
-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};
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"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"]}