Hook for detecting if page loses/regains focus

useWindowFocus.ts

import React from "react";

const useWindowFocus = () => {
    const [focused, setFocused] = React.useState(false);

    const callback = ({ type }: FocusEvent) => {
        const value = type === "blur" ? false : true;
        setFocused(value);
    };

    React.useEffect(() => {
        window.addEventListener("focus", callback);
        window.addEventListener("blur", callback);

        return () => {
            window.removeEventListener("focus", callback);
            window.removeEventListener("blur", callback);
        };
    }, []);

    return focused;
};

export default useWindowFocus;