How to check if app is open in another tab for Reactjs App

I’m creating a react app, and I want the user won’t be able to open the app in another tab if the app already opened it in another tab. something like WhatsApp https://imgur.com/a/wugEAha.

Is there any way to detect if the app already opens in another tab?

1 thought on “How to check if app is open in another tab for Reactjs App”

  1. I’m answering my own question, I’ve done this successfully. I’ve created a custom react hook to force my app to open on a single tab.

    I’ll improve my code soon but for now, this working fine for me.

    see the example: https://m407l.csb.app/

    import { useState, useEffect, useRef } from "react";
    
    const useIsMainWindow = () => {
      const initialized = useRef(false);
      const isNewWindowPromotedToMain = useRef(false);
      const windowId = useRef(null);
      const [isMain, setIsMain] = useState(true);
    
      const getWindowArray = () => {
        let storage = window.localStorage.getItem("checkTab");
        return storage ? JSON.parse(storage) : [];
      };
    
      const setWindowArray = (data) => {
        window.localStorage.setItem("checkTab", JSON.stringify(data));
      };
    
      const determineWindowState = () => {
        let windowArray = getWindowArray();
    
        if (initialized.current) {
          if (
            windowArray.length <= 1 ||
            (isNewWindowPromotedToMain.current
              ? windowArray[windowArray.length - 1]
              : windowArray[0]) === windowId.current
          ) {
            setIsMain(true);
          } else {
            setIsMain(false);
          }
        } else {
          if (windowArray.length === 0) {
            setIsMain(true);
          } else {
            setIsMain(false);
          }
          const newWindowArray = [...windowArray, windowId.current];
          setWindowArray(newWindowArray);
        }
    
        setTimeout(function () {
          determineWindowState();
        }, 1500);
      };
    
      const removeWindow = () => {
        var newWindowArray = getWindowArray();
        for (var i = 0, length = newWindowArray.length; i < length; i++) {
          if (newWindowArray[i] === windowId.current) {
            newWindowArray.splice(i, 1);
            break;
          }
        }
        setWindowArray(newWindowArray);
      };
    
      useEffect(() => {
        window.addEventListener("beforeunload", removeWindow);
        window.addEventListener("unload", removeWindow);
        isNewWindowPromotedToMain.current = true;
        windowId.current = Date.now().toString();
        determineWindowState();
        initialized.current = true;
    
        () => {
          window.removeEventListener("beforeunload", removeWindow);
          window.removeEventListener("unload", removeWindow);
        };
      }, []);
    
      return isMain;
    };
    
    export default useIsMainWindow;
    
    
    Reply

Leave a Comment