react-visibility-hooks 1.0.2 → 1.0.4

package/dist/index.cjs

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

package/dist/index.cjs.map

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

package/dist/index.d.cts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,12 @@
+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

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

package/dist/index.js.map

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

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "react-visibility-hooks",
-  "version": "1.0.2",
-  "description": "Tiny React hooks for visibility, idle detection, and smart polling",
+  "version": "1.0.4",
+  "description": "Tiny, SSR-safe React hooks for page visibility, idle detection and smart polling",
+  "type": "module",
   "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     }
   },
+  "files": [
+    "dist"
+  ],
   "sideEffects": false,
   "scripts": {
     "build": "tsup",
@@ -20,14 +23,26 @@
   },
   "keywords": [
     "react",
-    "hooks",
+    "react-hooks",
     "visibility",
-    "idle",
-    "performance"
+    "page-visibility",
+    "idle-detection",
+    "performance",
+    "react-performance",
+    "smart-polling",
+    "analytics",
+    "react-utils"
   ],
   "author": "Aniket Raj",
   "license": "MIT",
-  "type": "commonjs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/exewhyz/react-visibility-hooks.git"
+  },
+  "homepage": "https://github.com/exewhyz/react-visibility-hooks#readme",
+  "bugs": {
+    "url": "https://github.com/exewhyz/react-visibility-hooks/issues"
+  },
   "peerDependencies": {
     "react": ">=18",
     "@tanstack/react-query": ">=4"
@@ -37,9 +52,6 @@
       "optional": true
     }
   },
-  "dependencies": {
-    "react": ">=18"
-  },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",

package/.github/workflows/release.yml

@@ -1,21 +0,0 @@
-name: Publish
-
-on:
-  push:
-    tags:
-      - "v*"
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          registry-url: https://registry.npmjs.org
-      - run: npm install
-      - run: npm run build
-      - run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/__tests__/useDocVisible.test.ts

@@ -1,19 +0,0 @@
-import { renderHook, act } from "@testing-library/react";
-import { useDocVisible } from "../src/useDocVisible";
-
-test("visibility changes", () => {
-  Object.defineProperty(document, "visibilityState", {
-    value: "visible",
-    configurable: true
-  });
-
-  const { result } = renderHook(() => useDocVisible());
-  expect(result.current).toBe(true);
-
-  act(() => {
-    Object.defineProperty(document, "visibilityState", { value: "hidden" });
-    document.dispatchEvent(new Event("visibilitychange"));
-  });
-
-  expect(result.current).toBe(false);
-});

package/jest.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  testEnvironment: "jsdom",
-  transform: {
-    "^.+\\.tsx?$": "ts-jest"
-  }
-};

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from "./useDocVisible";
-export * from "./useIdleVisibility";
-export * from "./useAutoPauseVideo";
-export * from "./useSmartPolling";

package/src/useAutoPauseVideo.ts

@@ -1,14 +0,0 @@
-import { useEffect } from "react";
-import { useDocVisible } from "./useDocVisible";
-
-export function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>) {
-  const visible = useDocVisible();
-
-  useEffect(() => {
-    const video = ref.current;
-    if (!video) return;
-
-    if (!visible) video.pause();
-    else video.play().catch(() => {});
-  }, [visible, ref]);
-}

package/src/useDocVisible.ts

@@ -1,16 +0,0 @@
-import { useEffect, useState } from "react";
-
-export function useDocVisible(): boolean {
-  const [visible, setVisible] = useState(
-    typeof document === "undefined" || document.visibilityState === "visible"
-  );
-
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    const handler = () => setVisible(document.visibilityState === "visible");
-    document.addEventListener("visibilitychange", handler);
-    return () => document.removeEventListener("visibilitychange", handler);
-  }, []);
-
-  return visible;
-}

package/src/useIdleVisibility.ts

@@ -1,29 +0,0 @@
-import { useEffect, useState } from "react";
-import { useDocVisible } from "./useDocVisible";
-
-export function useIdleVisibility(timeout = 60000) {
-  const visible = useDocVisible();
-  const [idle, setIdle] = useState(false);
-
-  useEffect(() => {
-    let timer: any;
-
-    const reset = () => {
-      setIdle(false);
-      clearTimeout(timer);
-      timer = setTimeout(() => setIdle(true), timeout);
-    };
-
-    window.addEventListener("mousemove", reset);
-    window.addEventListener("keydown", reset);
-    reset();
-
-    return () => {
-      window.removeEventListener("mousemove", reset);
-      window.removeEventListener("keydown", reset);
-      clearTimeout(timer);
-    };
-  }, [timeout]);
-
-  return { visible, idle };
-}

package/src/useSmartPolling.ts

@@ -1,26 +0,0 @@
-import { useDocVisible } from "./useDocVisible";
-
-let useQuery: any;
-
-try {
-  useQuery = require("@tanstack/react-query").useQuery;
-} catch {
-  useQuery = null;
-}
-
-export function useSmartPolling(fetchFn: () => Promise<any>) {
-  const visible = useDocVisible();
-
-  if (!useQuery) {
-    console.warn(
-      "Install @tanstack/react-query to use useSmartPolling hook"
-    );
-    return null;
-  }
-
-  return useQuery({
-    queryKey: ["smartPolling"],
-    queryFn: fetchFn,
-    refetchInterval: visible ? 5000 : false,
-  });
-}

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2019",
-    "module": "ESNext",
-    "declaration": true,
-    "outDir": "dist",
-    "jsx": "react-jsx",
-    "strict": true,
-    "moduleResolution": "node",
-    "skipLibCheck": true
-  },
-  "include": ["src"]
-}

package/tsup.config.ts

@@ -1,11 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig({
-  entry: ["src/index.ts"],
-  format: ["esm", "cjs"],
-  dts: true,
-  sourcemap: true,
-  minify: true,
-  clean: true,
-  external: ["react", "@tanstack/react-query"] // ← IMPORTANT
-});