Use Tab Visibility

A (simple) zero-dependency way to tell if your React app is being run in the currently active tab.

Simply import the hook and pull the visible key off of the returned object. This value will let you know if the tab is currently visible.

The React hook is using the Page Visibility API under the hood is and compatible down to IE 10.

A change in visibility will trigger a re-render.

View on NPM

Basic usage:

import React from 'react';
import useTabVisibility from 'use-tab-visibility';

function App() {
  const { visible } = useTabVisibility();
  console.warn(visible);

  return <div>This tab is current {visible ? 'visible' : 'not visible'}</div>;
}