diff --git a/src/hooks/usePageVisibility.ts b/src/hooks/usePageVisibility.ts new file mode 100644 index 0000000..5eb0083 --- /dev/null +++ b/src/hooks/usePageVisibility.ts @@ -0,0 +1,23 @@ +import { useState, useEffect } from 'react'; + +/** + * Hook to detect tab visibility using the Page Visibility API + * @returns boolean - true when page is visible, false when hidden + */ +export const usePageVisibility = (): boolean => { + const [isVisible, setIsVisible] = useState(!document.hidden); + + useEffect(() => { + const handleVisibilityChange = () => { + setIsVisible(!document.hidden); + }; + + document.addEventListener('visibilitychange', handleVisibilityChange); + + return () => { + document.removeEventListener('visibilitychange', handleVisibilityChange); + }; + }, []); + + return isVisible; +};