Page Visibility

import { pageVisibility } from "mobx-web-api";

Allows tracking window focus and blur

What's inside

Uses Page Visibility API under the hood

Usage

import { pageVisibility } from "mobx-web-api";
import { reaction } from "mobx";

console.log(pageVisibility.isVisible); // true
console.log(pageVisibility.isHidden); // false

reaction(
  () => pageVisibility.isVisible,
  (isVisible) => {
    console.log(
      isVisible ?
        "User is on page" :
        "User is out of page :("
    );
  }
);

Properties

isVisible

Has true if document is visible and false if it is hidden

isHidden

Has true if document is hidden and false if it is visible