Skip to content
react-visibility-hooks

Installation – react-visibility-hooks

Install

Terminal window
npm install react-visibility-hooks

Or with your preferred package manager:

Terminal window
# yarn
yarn add react-visibility-hooks


# pnpm
pnpm add react-visibility-hooks


# bun
bun add react-visibility-hooks

Requirements

  • React ≥ 16.8.0 (needs Hooks)
  • TypeScript ≥ 4.7 (optional, for type inference)

Quick Start

import { useDocVisible } from "react-visibility-hooks";


function App() {
  const isVisible = useDocVisible();


  return (
    <div>
      <p>Tab is {isVisible ? "visible" : "hidden"}</p>
    </div>
  );
}

Bundle Impact

The library is tree-shakeable. If you only import useDocVisible, only that code ships:

ImportMinified + gzipped
useDocVisible only~200 B
All 9 hooks< 3 kB

ESM & CJS

The package ships dual formats:

// ESM (default)
import { useDocVisible } from "react-visibility-hooks";


// CJS
const { useDocVisible } = require("react-visibility-hooks");