https://github.com/muratgozel/visibility-state-listener

Cross-browser document visibility state detection library. Detects if user has switched to another window/tab or not.
https://github.com/muratgozel/visibility-state-listener

cross-browser visibility-event visibility-state

Last synced: 19 days ago
JSON representation

Cross-browser document visibility state detection library. Detects if user has switched to another window/tab or not.

• Host: GitHub
• URL: https://github.com/muratgozel/visibility-state-listener
• Owner: muratgozel
• License: mit
• Created: 2020-02-02T11:01:28.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:31:08.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T22:42:47.718Z (8 months ago)
• Topics: cross-browser, visibility-event, visibility-state
• Language: JavaScript
• Size: 352 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# visibility-state-listener

Cross-browser **document visibility state** detection library. Detects if user has switched to another window/tab or not.

![NPM](https://img.shields.io/npm/l/visibility-state-listener)

[![npm version](https://badge.fury.io/js/visibility-state-listener.svg)](https://badge.fury.io/js/visibility-state-listener)

![npm bundle size](https://img.shields.io/bundlephobia/min/visibility-state-listener)

![npm](https://img.shields.io/npm/dy/visibility-state-listener)

## Install

```sh

npm i visibility-state-listener

```

## Import

There are different types of distributions depending on your use case. Essentially, the package can be imported via require:

```js

const kit = require('visibility-state-listener')

```

or via script tag:

```html

```

but there are lots of other options. See distribution report below.

## Use

```js

const listener = require('./createVisibilityStateListener')

// if you injected the library with script tag use: window.VisibilityStateListener global

// register listener function

listener.on('update', function(newState) {

  const isWindowVisible = newState == 'visible'

})

// start to listen for visibility changes

listener.start()

```

It registers appropriate listener functions according to the browser. If you want to remove them call `.pause()`:

```js

// no event will be emitted after calling pause

listener.pause()

```

---

## Distributions Report

This is an auto-generated report that shows the type, name and size of the bundles available to use individually.

[comment]: # (DISTRIBUTIONS_REPORT_START)

```js

[

  "visibility-state-listener.amd.js (1.88 KB)",

  "visibility-state-listener.amd.polyfilled.js (10.25 KB)",

  "visibility-state-listener.cjs.js (1.87 KB)",

  "visibility-state-listener.cjs.polyfilled.js (10.27 KB)",

  "visibility-state-listener.es.js (1.78 KB)",

  "visibility-state-listener.es.polyfilled.js (10.18 KB)",

  "visibility-state-listener.iife.js (1.89 KB)",

  "visibility-state-listener.iife.polyfilled.js (10.26 KB)",

  "visibility-state-listener.umd.js (2.14 KB)",

  "visibility-state-listener.umd.polyfilled.js (10.51 KB)"

]

```

[comment]: # (DISTRIBUTIONS_REPORT_END)

## Babel Polyfills Report

This is an auto-generated report that shows the pollyfils added by core-js to the **pollyfilled** distributions based on the targets configuration described below.

[comment]: # (BABEL_POLYFILLS_REPORT_START)

```js

// polyfills:

[]

// based on the targets:

{

  "android": "4.4.3",

  "chrome": "49",

  "edge": "18",

  "firefox": "78",

  "ie": "9",

  "ios": "6",

  "opera": "73",

  "safari": "5.1",

  "samsung": "4"

}

```

[comment]: # (BABEL_POLYFILLS_REPORT_END)

Thanks for watching 🐬

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/F1F1RFO7)