npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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

Readme

MIT Version CI PRs Welcome

@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.

Demo

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.