Skip to content
Dead-simple, React hook lib for detecting page visibility 👁️
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore fix: resolve module name generation Sep 4, 2019
LICENSE Initial commit Sep 4, 2019
README.md doc: update demo link Sep 5, 2019
lib.js fix(cb): avoid using stale callback Sep 10, 2019
package-lock.json 3.0.2 Sep 10, 2019
package.json 3.0.2 Sep 10, 2019
rollup.config.js build: config rollup for bundling lib Sep 5, 2019

README.md

use-page-visibility

Dead-simple, React hook lib for detecting page visibility 👁️

Demo

https://use-page-visibility.netlify.com/

Prerequisite

Installation

npm install use-page-visibility

or with yarn

yarn add use-page-visibility

Usage

...
import usePageVisibility from 'use-page-visibility';

function App() {
  const handleVisibilityChange = (visible) => {
    if (visible) playVideo();
    else pauseVideo();
  }

  usePageVisibility(handleVisibilityChange); 

  return ...
}

Api

usePageVisibility(fn, delay)

fn

Type: function

Callback function to run when page visibility changes. A boolean value (indicating whether the page is visible or not) will be passed as an argument to this function.

delay (optional)

Type: number

Number of milliseconds to wait before responding to page visibility change

Related

  • react-thanos - React hooks implementation of Google's "Thanos" easter egg

Author

Olushi Luqman Opemipo

License

This project is licensed under MIT

You can’t perform that action at this time.