{"_id":"@alkeshgupta/tab-visibility","_rev":"5-769a55a37a933a8df368fd702712d2dd","name":"@alkeshgupta/tab-visibility","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"@alkeshgupta/tab-visibility","version":"1.0.1","keywords":["tab visibility","visibility api","react hook","events","pause media"],"author":{"name":"Alkesh Gupta"},"license":"MIT","_id":"@alkeshgupta/tab-visibility@1.0.1","maintainers":[{"name":"alkeshgupta","email":"thealkeshgupta@gmail.com"}],"homepage":"https://github.com/thealkeshgupta/tab-visibility#readme","bugs":{"url":"https://github.com/thealkeshgupta/tab-visibility/issues"},"dist":{"shasum":"fb2e535d96370ee43c28bde713b22d15e41a4815","tarball":"https://registry.npmjs.org/@alkeshgupta/tab-visibility/-/tab-visibility-1.0.1.tgz","fileCount":7,"integrity":"sha512-bIRIXDdwBiLgxtxGl4WGLH0uv1jfXJOGy7Wgmv1L4wft8lrusZ7mNTaEkGf6E0ge7+AcS5Q62FkPvr/levikfw==","signatures":[{"sig":"MEQCIDiDusHZ5yhvCkaeUPV6/vx9yp6x9L+Ml2mejulQkB2XAiB3H9NMPYp7wIvdn247ipojjsSKLFX+mAuNE+BNSYKePA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6071},"main":"src/index.js","gitHead":"b8a53cab6ba3d415a70df3ba18d154f3ebf07693","_npmUser":{"name":"alkeshgupta","email":"thealkeshgupta@gmail.com"},"repository":{"url":"git+https://github.com/thealkeshgupta/tab-visibility.git","type":"git"},"_npmVersion":"11.6.2","description":"A lightweight utility that lets you detect when the browser tab becomes **visible** or **hidden**, trigger custom callbacks, and optionally **auto-pause media** (video/audio) when the user switches tabs.","directories":{},"_nodeVersion":"20.19.4","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-visibility_1.0.1_1762110365410_0.5381127719401826","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@alkeshgupta/tab-visibility","version":"1.0.2","main":"src/index.js","keywords":["tab visibility","visibility api","react hook","events","pause media"],"author":{"name":"Alkesh Gupta"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/thealkeshgupta/tab-visibility.git"},"bugs":{"url":"https://github.com/thealkeshgupta/tab-visibility/issues"},"homepage":"https://github.com/thealkeshgupta/tab-visibility#readme","gitHead":"0ed35b75b7c285bda32283fdf54995049db76239","_id":"@alkeshgupta/tab-visibility@1.0.2","description":"A lightweight utility that lets you detect when the browser tab becomes **visible** or **hidden**, trigger custom callbacks, and optionally **auto-pause media** (video/audio) when the user switches tabs.","_nodeVersion":"20.19.4","_npmVersion":"11.6.2","dist":{"integrity":"sha512-BvdpogbA7cblHHZ+mh5yWPHWBF8cwYIYEeP3EZ8MOf2Vgt3pyq7YFSIU/kopKckvZYcM0tqj7DUwJcSpuRECeQ==","shasum":"0e63e2d1327e90e29955d4455ae4ac2e15f89712","tarball":"https://registry.npmjs.org/@alkeshgupta/tab-visibility/-/tab-visibility-1.0.2.tgz","fileCount":7,"unpackedSize":6280,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFqBVlbwcaRfA+mzzoXR9QhOl3AQGxcdgJMVATOB0h7ZAiEA3nVW+Auep0CkZ0LVL97QQ04dGJW67aEwGQGXhoo58ac="}]},"_npmUser":{"name":"alkeshgupta","email":"thealkeshgupta@gmail.com"},"directories":{},"maintainers":[{"name":"alkeshgupta","email":"thealkeshgupta@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tab-visibility_1.0.2_1762112254277_0.6711067128645398"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-02T19:06:05.268Z","modified":"2025-11-02T19:37:34.991Z","1.0.0":"2025-11-02T18:58:40.549Z","1.0.1":"2025-11-02T19:06:05.608Z","1.0.2":"2025-11-02T19:37:34.467Z"},"bugs":{"url":"https://github.com/thealkeshgupta/tab-visibility/issues"},"author":{"name":"Alkesh Gupta"},"license":"MIT","homepage":"https://github.com/thealkeshgupta/tab-visibility#readme","keywords":["tab visibility","visibility api","react hook","events","pause media"],"repository":{"type":"git","url":"git+https://github.com/thealkeshgupta/tab-visibility.git"},"description":"A lightweight utility that lets you detect when the browser tab becomes **visible** or **hidden**, trigger custom callbacks, and optionally **auto-pause media** (video/audio) when the user switches tabs.","maintainers":[{"name":"alkeshgupta","email":"thealkeshgupta@gmail.com"}],"readme":"# @alkeshgupta/tab-visibility\n\nA lightweight utility that lets you detect when the browser tab becomes **visible** or **hidden**, trigger custom callbacks, and optionally **auto-pause media** (video/audio) when the user switches tabs.\n\nPerfect for analytics, UX improvements, pausing timers, audio/video control, and more — with APIs for both **React** and **Vanilla JS**.\n\n---\n\n## ✨ Features\n\n- Detect when the tab is shown\n- Detect when the tab is hidden\n- Register multiple callbacks\n- Works in React (custom hook style) and Vanilla JS\n- Auto pause video/audio when tab is hidden\n- Easy setup — tiny API\n- Lightweight & dependency-free\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @alkeshgupta/tab-visibility\n```\n\nor\n\n```bash\nyarn add @alkeshgupta/tab-visibility\n```\n\n---\n\n## 🧠 Basic Usage\n\n```js\nimport { useTabVisibility } from \"@alkeshgupta/tab-visibility\";\n\nuseTabVisibility.onShow(() => {\n  console.log(\"Tab is visible again!\");\n});\n\nuseTabVisibility.onHide(() => {\n  console.log(\"User switched tab!\");\n});\n```\n\n---\n\n## ⚛️ React Usage Example\n\nWorks anywhere inside your components.\n\n```js\nimport { useEffect } from \"react\";\nimport { useTabVisibilityHook } from \"@alkeshgupta/tab-visibility\";\n\nfunction MyComponent() {\n  useTabVisibilityHook({\n    onHide: () => {\n      console.log(\"User switched tab!\");\n    },\n\n    onShow: () => {\n      console.log(\"Tab is visible again!\");\n    },\n  });\n\n  return <div>Watching tab visibility</div>;\n}\n\nexport default MyComponent;\n```\n\nYou can register as many event handlers as you want.\n\n---\n\n## 🔊 Auto Pause Media (Video/Audio)\n\nAutomatically pause all <video> and <audio> elements when the tab becomes hidden:\n\n```js\nimport { autoPauseMedia } from \"@alkeshgupta/tab-visibility\";\n\nuseEffect(() => {\n  autoPauseMedia();\n}, []);\n```\n\nOptional - Ignore Muted Media:\n\n```js\nimport { autoPauseMedia } from \"@alkeshgupta/tab-visibility\";\n\nuseEffect(() => {\n  autoPauseMedia({ ignoreMuted: true });\n}, []);\n```\n\n---\n\n## 🧩 Vanilla Example (HTML)\n\nWorks anywhere inside your components.\n\n```html\n<script type=\"module\">\n  import { useTabVisibility } from \"https://cdn.jsdelivr.net/npm/@alkeshgupta/tab-visibility@1.0.1/src/index.js\";\n\n  useTabVisibility.onShow(() => {\n    console.log(\"Tab is visible again!\");\n  });\n\n  useTabVisibility.onHide(() => {\n    console.log(\"User switched tab!\");\n  });\n</script>\n```\n\n---\n\n## 🧬 API Reference\n\n### `onShow(callback: Function)`\n\nRegisters a function to run when tab becomes visible.\n\n```js\nonShow(() => console.log(\"Welcome back!\"));\n```\n\n### `onHide(callback: Function)`\n\nRegisters a function to run when tab becomes hidden.\n\n```js\nonHide(() => console.log(\"Hey come back 👀\"));\n```\n\n### `autoPauseMedia()`\n\nPauses all video and audio elements on the page.\n\n```js\nautoPauseMedia();\n```\n\n### `autoPauseMedia({ ignoreMuted: true })`\n\nPauses all unmuted video and audio elements on the page.\n\n```js\nautoPauseMedia({ ignoreMuted: true });\n```\n\n---\n\n## 📜 Browser Support\n\n✅ Chrome\\\n✅ Firefox\\\n✅ Edge\\\n✅ Safari\\\n✅ Opera\n\nUses the standard visibilitychange API, widely supported.\n\n---\n\n## 📏 Notes\n\n- All callbacks can be registered multiple times.\n- Order of callbacks is preserved.\n- Works in frameworks (React, Next.js, etc.) after mount.\n\n---\n\n## 📄 License\n\nMIT License © 2025 Alkesh Gupta \\\nFeel free to use, modify, and distribute.\n\n---\n\n## ⭐ Support\n\nIf you like this library, consider:\n\n- leaving a [GitHub](https://github.com/thealkeshgupta/tab-visibility.git) & npm star ⭐\n- reporting issues\n- contributing ideas\n\n---\n","readmeFilename":"README.md"}