use-tab-visibility
TypeScript icon, indicating that this package has built-in type declarations

1.0.9 • Public • Published

Use Tab Visibility

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

Blazing Fast Blazing Fast Blazing Fast

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>;
}

Readme

Keywords

none

Package Sidebar

Install

npm i use-tab-visibility

Weekly Downloads

1,079

Version

1.0.9

License

MIT

Unpacked Size

5.26 kB

Total Files

7

Last publish

Collaborators

  • tylerzey