single-tab/dist/hooks/useSingleTab.js

A lightweight React library to detect and handle duplicate tabs in web applications

import { useEffect, useState } from "react";
import { createTabManager } from "../core/tabManager";
/**
 * Custom hook to detect and handle duplicate tabs in a React application.
 * @param appId - A unique identifier for your application.
 * @returns Hook state for managing duplicate tabs.
 */
export const useSingleTab = (appId) => {
    const [isDuplicate, setIsDuplicate] = useState(false); // Whether this tab is a duplicate
    const [message, setMessage] = useState(null); // Warning message
    const [showWarning, setShowWarning] = useState(false); // Control warning visibility
    useEffect(() => {
        // Callback triggered when a duplicate tab is detected
        const onDuplicate = () => {
            setIsDuplicate(true);
            setMessage("Oops! Looks like this app is already open elsewhere. To avoid conflicts, please continue in the first tab");
            setShowWarning(true);
            // Optionally, you can add logic to disable the UI here
        };
        // Initialize the TabManager
        const tabManager = createTabManager(appId, onDuplicate);
        // Cleanup when the component is unmounted
        return () => {
            tabManager.cleanup();
        };
    }, [appId]); // Only reinitialize if appId changes
    return {
        isDuplicate,
        showWarning,
        message,
    };
};