visibility-state-listener

    2.0.0 • Public • Published

    visibility-state-listener

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

    NPM npm version npm bundle size npm

    Install

    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:

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

    or via script tag:

    <script src="https://unpkg.com/visibility-state-listener@2/dist/visibility-state-listener.iife.js" crossorigin type="text/javascript"></script>

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

    Use

    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():

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

    [
      "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)"
    ]

    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.

    // 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"
    }

    Thanks for watching 🐬

    ko-fi

    Install

    npm i visibility-state-listener

    DownloadsWeekly Downloads

    5

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    78.7 kB

    Total Files

    23

    Last publish

    Collaborators

    • muratgozel