@rosskevin/ifvisible
v3.3.5
Published
Cross-browser, lightweight way to check if user is looking at the page or interacting with it. (wrapper around HTML5 visibility api)
Downloads
855
Maintainers
Readme
@rosskevin/ifvisible
Lightweight way to see if a browser page is visible or the user is interacting.
Check out the Demo or read below for code examples.
Installation
From npm
npm install @rosskevin/ifvisible
# or
yarn install @rosskevin/ifvisible
Examples
Instantiation
This library provides a singleton exposed as ifvisible
by default in addition to a UMD package, but for more advancecd users, they can import the class directly for a different attachment from the ES package.
// import singleton global bound to the `window`
or for more advanced usage for use cases that a singleton may not be useful, you may instantiate it directly:
// import the object and instantiate it yourself
import { IfVisible } from '@rosskevin/ifvisible'
window.ifvisible = new IfVisible(window, document)
General
import { ifvisible } from '@rosskevin/ifvisible'
// If page is visible right now
if (ifvisible.now()) {
// Display pop-up
}
// You can also check the page status using `now` method
if (!ifvisible.now('hidden')) {
// Display pop-up if page is not hidden
}
// Possible statuses are:
// idle: when user has no interaction
// hidden: page is not visible
// active: page is visible and user is active
Options
import { ifvisible } from '@rosskevin/ifvisible'
ifvisible
.setIdleDuration(120) // default: 30 - Page will become idle after 120 seconds
.setThrottleDuration(1000) // default: 500 - DOM event triggers will be throttled to avoid bogging down UI
onEvery
Set intervals that run every X seconds if the page is visible.
import { ifvisible } from '@rosskevin/ifvisible'
// If page is visible run this function on every half seconds
ifvisible.onEvery(0.5, () => {
// ...
})
on
import { ifvisible } from '@rosskevin/ifvisible'
ifvisible.on('blur', () => {
// ...
})
ifvisible.on('focus', () => {
// ...
})
ifvisible.on('idle', () => {
// ...
})
ifvisible.on('wakeup', () => {
// ...
})
off
:
import { ifvisible } from '@rosskevin/ifvisible'
const triggeredFunction = () => {}
ifvisible.off('idle', triggeredFunction) // will remove only triggeredFunction from being tiggered on idle
ifvisible.off('idle') // will remove all events triggered on idle
// works with other events: blur | wakeup | focus
Manually trigger status events
import { ifvisible } from '@rosskevin/ifvisible'
// will put page in a idle status
ifvisible.idle()
// will set a callback to listen - same as on('idle', () => void)
ifvisible.idle(() => {
// ...
})
// works with other events: blur | wakeup | focus
Advanced
import { ifvisible } from '@rosskevin/ifvisible'
ifvisible.detach() // detach from DOM but keep user listeners stored within ifvisible
ifvisible.reattach() // reattach to DOM and start listening again
Browsers
This library is intended to support modern browsers. Legacy IE support (not Edge) was dropped to clean up code. Given Microsoft discontinued IE altogether, moving forward is in the best interest of maintenance. If you need legacy support, look towards the original ifvisible.js
Why fork?
The original ifvisible.js library was:
- languishing with no updates
- old build system
- outdated dev depencies
- used typescript but was not strongly typed
- did not publish the typescript types (even though it was written in typescript)
- burdened with legacy code everywhere
- only a UMD module available.
- we wanted to improve the library
In contrast this version:
- targets modern browsers only
- is strongly typed
- publishes UMD and ES bundles (will publish ESM as that comes to pass as well)
- is fully updated and maintained
NOTE: this fork was detached
for the sole purpose of making new pull requests point to this repo instead of the original unmaintained parent.
License
MIT.