Lonely Tab Title

Changes the page title to a custom message when the user switches away from the tab. Uses the Page Visibility API.

Component

<LonelyTabTitle /><LonelyTabTitle text="Come back! 😢" />

"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

pnpm dlx shadcn@latest add "https://pulkitxm.com/components/lonely-tab-title.json"

1. Copy the component file

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

2. Import and add to layout

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

<LonelyTabTitle />;

Usage

Import

Add the LonelyTabTitle import.

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

Use

Add to your root layout.

<LonelyTabTitle />;

Guidelines

Add to root layout (e.g. app/layout.tsx) for site-wide effect.
Renders nothing; only listens for visibilitychange events.
Restores the original title when the user returns to the tab.
Use the text prop to customize the message shown when the tab is hidden.

Props

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

Prop	Type	Default	Description
text	string	"I am a lonely tab!!"	Title to show when the user switches away from the tab.

Examples

Basic

Add to your root layout. When you switch tabs, the title becomes 'I am a lonely tab!!'.

<LonelyTabTitle /><LonelyTabTitle text="Come back! 😢" />

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

<LonelyTabTitle />;

Custom text

Custom message when the user leaves the tab.

<LonelyTabTitle /><LonelyTabTitle text="Come back! 😢" />

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

<LonelyTabTitle text="Come back! 😢" />;

Last updated on Mar 10