Lonely Tab Title for React

Component

"use client";

import { useEffect, useRef } from "react";

const DEFAULT_TEXT = "I am a lonely tab!!";

interface LonelyTabTitleProps {
  text?: string;
}

export function LonelyTabTitle({
  text = DEFAULT_TEXT,
}: LonelyTabTitleProps) {
  const savedTitleRef = useRef("");

  useEffect(() => {
    function handleVisibilityChange() {
      if (document.hidden) {
        savedTitleRef.current = document.title;
        document.title = text;
      } else {
        document.title =
          savedTitleRef.current || document.title;
      }
    }

    document.addEventListener(
      "visibilitychange",
      handleVisibilityChange,
    );
    return () =>
      document.removeEventListener(
        "visibilitychange",
        handleVisibilityChange,
      );
  }, [text]);

  return null;
}

Installation

"use client";

import { useEffect, useRef } from "react";

const DEFAULT_TEXT = "I am a lonely tab!!";

interface LonelyTabTitleProps {
  text?: string;
}

export function LonelyTabTitle({
  text = DEFAULT_TEXT,
}: LonelyTabTitleProps) {
  const savedTitleRef = useRef("");

  useEffect(() => {
    function handleVisibilityChange() {
      if (document.hidden) {
        savedTitleRef.current = document.title;
        document.title = text;
      } else {
        document.title =
          savedTitleRef.current || document.title;
      }
    }

    document.addEventListener(
      "visibilitychange",
      handleVisibilityChange,
    );
    return () =>
      document.removeEventListener(
        "visibilitychange",
        handleVisibilityChange,
      );
  }, [text]);

  return null;
}

import { LonelyTabTitle } from "@/components/lonely-tab-title";

<LonelyTabTitle />;

Usage

import { LonelyTabTitle } from "@/components/lonely-tab-title";

<LonelyTabTitle />;

Props

All props are optional unless marked required. Use these to customize every aspect of the component.

Accessibility

• Headless utility that returns null, so it renders no DOM, no interactive controls, and nothing focusable or operable by keyboard.
• It only mutates document.title via the Page Visibility API, which screen readers may announce as a title change when the tab regains or loses focus.
• There are no ARIA attributes, roles, or labels because there is no rendered element to describe.
• No motion or animation is involved, so prefers-reduced-motion is not applicable to this component.
• Be mindful that overwriting the document title removes the page name from the title bar and history while the tab is hidden, which can momentarily reduce context for assistive technology users.

Performance

• Extremely lightweight: a single visibilitychange listener registered in a useEffect, with no rendering work, no animation, and no per-frame updates.
• It animates no CSS or JS properties and uses neither requestAnimationFrame nor IntersectionObserver, so there is zero compositor or layout cost.
• The original title is cached in a useRef, avoiding extra re-renders, and the only DOM write is the cheap document.title assignment on visibility change.
• The effect cleanup removes the visibilitychange listener on unmount and re-subscribes only when the text prop changes, preventing duplicate or leaked listeners.

Related reading

• When to Animate and When to Skip — Subtle attention cues versus distraction