use-page-visibility

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

Demo

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

Prerequisite

• React 16.8+

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